如何在可编辑 div 中正确实现 Python 代码高亮（避免文本反转）

核心问题在于：

• writableDiv.innerText 只提取纯文本，丢弃所有格式、换行符标准化（如 → ），且不保留光标/选区信息；
• writableDiv.innerHTML = text.replace(…) 强制重写整个 DOM 子树，浏览器会销毁现有节点并重建，光标必然回到开头，用户输入的实时体验彻底崩溃；
• 正则全局替换 ‘…‘ 插入后，若原文本含 、& 等字符，还会引发 xss 风险或 HTML 解析异常。

✅ 正确做法：不重写整个 innerHTML，而采用增量 DOM 操作 + 选区保持。以下是轻量级、生产可用的修复方案：

<div id="code-editor" spellcheck="false" contenteditable="true" style="font-family: monospace; white-space: pre; line-height: 1.4;"></div>

const editor = document.getElementById("code-editor"); const pythonKeywords = ["def", "class", "if", "else", "for", "while", "import", "from", "return", "print"]; // 示例关键词 const keywordRegex = new RegExp(`b(${pythonKeywords.map(k => k.replace(/[.*+?^${}()|[]]/g, '$&')).join('|')})b`, 'g');  // 防抖：避免每输入一个字符都触发高亮（性能关键） let highlightTimeout; editor.addEventListener('input', () => {   clearTimeout(highlightTimeout);   highlightTimeout = setTimeout(() => {     highlightKeywords(editor);   }, 150); });  function highlightKeywords(el) {   // 保存当前光标位置   const selection = window.getSelection();   const range = selection.getRangeAt(0);   const preCaretRange = range.cloneRange();   preCaretRange.selectNodeContents(el);   preCaretRange.setEnd(range.endContainer, range.endOffset);   const caretOffset = preCaretRange.toString().length;    // 安全地将纯文本转为带高亮的 HTML（仅转义必要字符）   const rawText = el.textContent;   const escapedText = rawText     .replace(/&/g, '&')     .replace(/</g, '<')     .replace(/>/g, '>');    // 使用正则匹配并包裹关键词（注意：仅对纯文本操作，不破坏结构）   const highlightedHTML = escapedText.replace(keywordRegex, '<span style="color:#f200ff;font-weight:bold;">$1</span>');    // 关键：用 innerHTML 替换前，先记录光标位置；替换后恢复   el.innerHTML = highlightedHTML;    // 恢复光标到原位置（基于字符偏移量）   restoreCaret(el, caretOffset); }  function restoreCaret(el, offset) {   const treeWalker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);   let node;   let charCount = 0;    while (treeWalker.nextNode()) {     node = treeWalker.currentNode;     const nodeLength = node.textContent.length;     if (charCount + nodeLength >= offset) {       const range = document.createRange();       const posInNode = offset - charCount;       range.setStart(node, posInNode);       range.setEnd(node, posInNode);       const selection = window.getSelection();       selection.removeAllRanges();       selection.addRange(range);       return;     }     charCount += nodeLength;   } }

⚠️ 重要注意事项：

立即学习“Python免费学习笔记（深入）”；

• 永远不要在 contenteditable 中直接 innerHTML = …：它会重置 DOM 树，破坏光标、撤销栈、IME 输入状态；
• 关键词正则需转义特殊字符：pythonKeywords.map(k => k.replace(/[.*+?^${}()|[]]/g, ‘$&’)) 防止正则语法错误；
• 必须做 HTML 实体转义：否则用户输入 <script> 会被解析为标签，造成 XSS 或渲染异常；</script>
• 使用防抖（debounce）而非节流（throttle）：保证最后一次输入后才高亮，避免中间态闪烁；
• 生产环境强烈推荐成熟编辑器：CodeMirror 6 或 Monaco Editor（VS Code 内核）已解决光标管理、语法树增量解析、主题、折叠等全部复杂问题，自研成本极高且难以稳定。

总结：可编辑 div 的高亮本质是「DOM 同步问题」，而非文本处理问题。优先选用专业编辑器库；若必须手写，请始终以「保持 DOM 结构 + 精确恢复光标」为设计前提，避免 innerText ↔ innerHTML 的暴力转换。