在可编辑 div 中直接用 innerHTML = text.replace(...) 动态插入带 HTML 标签的高亮内容，会导致光标错位、文本倒序等异常行为——根本原因在于 innerHTML 覆盖破坏了浏览器原生编辑状态，而非正则或拼写错误。
在可编辑 div 中直接用 `innerhtml = text.replace(...)` 动态插入带 html 标签的高亮内容，会导致光标错位、文本倒序等异常行为——根本原因在于 `innerhtml` 覆盖破坏了浏览器原生编辑状态，而非正则或拼写错误。
你遇到的 def 显示为 fed，本质不是字符被翻转，而是光标位置丢失 + DOM 重建引发的输入流错乱。当执行 writableDiv.innerHTML = text 时，浏览器会销毁整个子节点并重新解析 HTML 字符串——这不仅清除了当前光标位置，还会将用户正在输入的未提交内容（如中途输入的 de）与新渲染的 混合，造成视觉上的“反转”假象（例如光标跳回开头、插入点错位、IME 输入异常等）。
✅ 正确做法：避免直接重写 innerHTML
不应将纯文本 innerText 经正则替换后直接赋值给 innerHTML。推荐以下两种稳健路径：
方案一：使用 document.execCommand（轻量兼容方案，适用于简单高亮）
<div id="code-editor" spellcheck="false" contenteditable="true"></div>
const editor = document.getElementById("code-editor");
const pythonKeywords = ["def", "class", "import", "return", "if", "else"]; // 示例
const keywordRegex = new RegExp('\b(' + pythonKeywords.join('|') + ')\b', 'g');
editor.addEventListener('input', () => {
// 仅在内容稳定后（如空格/换行后）触发，避免高频干扰
if (event.inputType === 'insertText' && /[s
;)]$/.test(editor.innerText.slice(-1))) {
const range = window.getSelection().getRangeAt(0);
const preCaret = range.cloneRange();
preCaret.selectNodeContents(editor);
preCaret.collapse(false); // collapse to end
// 安全地获取当前完整文本（不含 HTML 标签）
const plainText = editor.innerText;
// 清空并重绘（注意：仍需谨慎，建议配合防抖）
editor.innerHTML = '';
editor.textContent = plainText;
// 再次应用高亮 —— 但更优方式是遍历文本节点做增量包装（见下方）
}
});⚠️ 注意：execCommand 已废弃，仅作过渡；现代项目应优先选用方案二。
方案二：采用专业代码编辑器（强烈推荐）
手动实现语法高亮编辑器是高危且低效的——它需处理光标同步、撤销栈、词法分析、主题切换、键盘事件（Tab/Enter/Backspace）、IME 兼容、无障碍支持等数十项复杂逻辑。成熟方案已解决全部问题：
立即学习“前端免费学习笔记（深入）”；
- CodeMirror 6：模块化、高性能、TypeScript 原生支持，提供 Python 语言包和主题系统；
- Monaco Editor（VS Code 内核）：功能最全，支持调试、智能提示、多光标；
- Prism + ContentEditable 封装库（仅高亮展示场景）：若无需编辑，用 Prism.highlightElement() 配合只读容器更安全。
✅ 示例（CodeMirror 6 + Python）：
npm install @codemirror/lang-python @codemirror/theme-one-dark
import { EditorView, basicSetup } from "codemirror";
import { python } from "@codemirror/lang-python";
import { oneDark } from "@codemirror/theme-one-dark";
const view = new EditorView({
state: EditorState.create({
doc: "# Hello Python",
extensions: [basicSetup, python(), oneDark]
}),
parent: document.getElementById("code-editor")
});? 关键总结
- ❌ 错误根源：innerHTML = string 强制重绘 → 破坏编辑上下文（光标、选区、输入法状态）；
- ✅ 正确原则：编辑状态与视图更新必须解耦——优先使用专为编辑设计的组件，而非 DIY contenteditable；
- ⚠️ 若必须自研，请基于 Text 节点操作（如 document.createTextNode + Range.surroundContents），并监听 compositionstart/end 处理中文输入；
- ? 真实项目中，99% 场景应直接集成 CodeMirror 或 Monaco——节省开发时间、规避兼容性雷区、保障可访问性。
选择正确的工具，不是妥协，而是对工程效率与用户体验的尊重。
