可编辑div实现Python代码高亮不乱序方法

核心问题在于：

• writableDiv.innerText 只提取纯文本，丢弃所有格式、换行符标准化（如 \r\n → \n），且不保留光标/选区信息；
• 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, '&lt;')
    .replace(/>/g, '&gt;');

  // 使用正则匹配并包裹关键词（注意：仅对纯文本操作，不破坏结构）
  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;
  }
}

⚠️ 重要注意事项：

• 永远不要在 contenteditable 中直接 innerHTML = ...：它会重置 DOM 树，破坏光标、撤销栈、IME 输入状态；
• 关键词正则需转义特殊字符：pythonKeywords.map(k => k.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')) 防止正则语法错误；
• 必须做 HTML 实体转义：否则用户输入