在可编辑 div 中通过 innerHTML 替换文本实现语法高亮时，若直接用 innerText 读取再 innerHTML 写入，会破坏 DOM 结构与光标位置，导致字符顺序错乱（如输入 def 显示为 fed），根本原因在于 HTML 解析与编辑状态的不一致。
在可编辑 div 中通过 `innerhtml` 替换文本实现语法高亮时，若直接用 `innertext` 读取再 `innerhtml` 写入，会破坏 dom 结构与光标位置，导致字符顺序错乱（如输入 `def` 显示为 `fed`），根本原因在于 html 解析与编辑状态的不一致。
这是一个典型但极易被忽视的 DOM 操作陷阱。问题代码看似合理：监听 input 事件 → 获取纯文本 → 正则匹配关键词 → 插入带样式的 → 赋值给 innerHTML。然而，writableDiv.innerText 会剥离所有 HTML 标签并规范化空白（包括换行、缩进），而 writableDiv.innerHTML = text 则将纯文本重新解析为 HTML——此时浏览器会自动修复“不合法”的嵌套结构，并可能错误地反转 Unicode 双向文本（Bidi）字符顺序，尤其在含空格、制表符或混合方向字符（如阿拉伯数字+拉丁字母）的上下文中，def 被误判为需镜像渲染的片段，最终呈现为 fed。
更深层的问题在于：contenteditable 的编辑状态（光标位置、选区、DOM 节点树）与 innerHTML 的粗暴重写完全不兼容。 每次赋值都会销毁原有节点，重建 DOM，导致光标跳回开头、选区丢失、事件绑定失效，且无法保证格式化逻辑的原子性。
✅ 正确做法不是“修复替换逻辑”，而是避免直接操作 innerHTML 实现动态高亮。以下是分层级的解决方案：
方案一：使用专业代码编辑器库（推荐）
自行实现健壮的语法高亮编辑器成本极高（需处理光标定位、撤销栈、词法分析、主题、键盘事件、无障碍等）。应优先选用成熟方案：
立即学习“前端免费学习笔记（深入）”；
-
CodeMirror 6：现代、模块化、高性能，内置 Python 语言支持与主题系统。
<div id="editor"></div> <script type="module"> import { EditorView, basicSetup } from "https://cdn.skypack.dev/codemirror@6.0.0"; import { python } from "https://cdn.skypack.dev/@codemirror/lang-python@6.0.0"; new EditorView({ parent: document.getElementById("editor"), extensions: [basicSetup, python()] }); </script> Monaco Editor（VS Code 同源）：功能最全，适合复杂 IDE 场景。
方案二：轻量级手动高亮（仅限简单场景）
若必须自研，应基于文本范围（Range）和 TextNode 操作，而非 innerHTML：
- 监听 input 事件后，获取当前光标位置（window.getSelection()）；
- 使用 textContent（非 innerText）读取原始内容，避免格式化干扰；
- 构建新的 DOM 结构：遍历文本，对关键词创建 ，其余内容保留为纯文本节点；
- 用 replaceChildren() 或 textContent + insertAdjacentHTML() 配合 Range 恢复光标，而非直接赋值 innerHTML。
⚠️ 注意事项：
- 绝对避免在 contenteditable 元素中混用 innerText 读取 + innerHTML 写入；
- innerText 会触发重排（reflow），性能差；textContent 更快且保持原始结构；
- 关键词正则需转义特殊字符（如 if, in, for 中的 |、( 等），原代码中 pythonKeywords.join('|') 存在注入风险；
- 浏览器对 contenteditable 的实现差异大（尤其 Safari 对 Bidi 处理更敏感），务必全平台测试。
总结：文本反转是 contenteditable + innerHTML 粗暴更新引发的 DOM 解析副作用，本质是架构选择错误。生产环境请直接集成 CodeMirror 或 Monaco；教学/极简场景下，务必改用 textContent + Range API 进行增量 DOM 更新，确保编辑状态一致性。
