javascript富文本编辑器的精准光标遍历依赖range、selection和treewalker等原生api，通过封装符合迭代器协议的对象，支持字符级定位、语义单元合并及与selectionchange事件实时同步。
JavaScript 中让富文本编辑器实现精准光标遍历，核心不是“手动实现 Iterator 接口”，而是利用浏览器原生的 Range、Selection 和 TreeWalker 等 API，配合自定义遍历逻辑来模拟可预测、可中断、可反向的“类迭代器”行为。DOM 本身没有为复杂编辑内容提供标准 Iterator 接口（如 [Symbol.iterator]），但你可以封装一个符合迭代器协议的对象，使其在遍历 DOM 节点时精确到字符、文本片段甚至编辑语义单元（如行、块、内联样式边界）。
用 TreeWalker + 自定义 next() 模拟迭代器协议
TreeWalker 是最贴近“DOM 节点迭代器”的原生工具，它能按文档顺序遍历符合条件的节点。你可以将其包装成符合迭代器协议（{ value, done }）的对象：
- 创建 TreeWalker 时指定
NodeFilter.SHOW_TEXT | SHOW_ELEMENT，并用acceptNode过滤掉不可编辑、隐藏或空节点（如<script></script>、display: none的元素） - 每次调用
next()时，用walker.nextNode()获取下一个有效节点；若为文本节点，还需支持按字符/字节/Unicode 码点进一步细分（例如处理 emoji、ZWJ 序列） - 返回值中不仅包含节点，还应携带光标位置上下文：如
{ node, offset: number, isAtStart: boolean, isAtEnd: boolean }
结合 Range 实现“字符级”精确定位
TreeWalker 只到节点粒度，而光标常需停在文本中间。此时需用 Range 对象锚定精确位置，并通过 range.cloneContents() 或 range.toString() 辅助判断边界：
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- 将光标位置抽象为
{ container: Node, offset: number }，这是 Range 的基础结构，也是所有编辑操作的底层坐标 - 遍历时，对每个文本节点计算其可编辑字符长度（注意：
node.textContent.length≠ 渲染可见字符数，需用Intl.Segmenter或正则处理 grapheme clusters） - 前移/后移光标时，先尝试在当前文本节点内调整
offset；超出范围则用 TreeWalker 找相邻节点，再归一化 offset（如移到下个文本节点开头）
处理富文本语义边界（如加粗、链接、行内代码）
纯 DOM 遍历会把 <strong><span>text</span></strong> 拆成多个节点，但用户感知的是“一段加粗文字”。这时需提升抽象层级：
- 定义“编辑单元（Editing Unit）”：比如一个连续的、具有相同 inline 样式（
font-weight、color、text-decoration）的文本段落，跨越多个嵌套元素也算一个单元 - 遍历时用
getComputedStyle()或解析元素 class/attribute 判断样式一致性，合并相邻同质文本节点 - 迭代器的
next()返回的是该语义单元的起始 Range，而非原始 DOM 节点，使光标移动符合用户直觉（例如跳过整个链接，而不是逐字穿过<a href="#"></a>）
响应用户输入与 selectionchange 事件联动
真实编辑器中，光标位置会因用户按键、粘贴、鼠标点击实时变化。迭代器不能是静态快照，而需与 Selection 同步：
- 监听
selectionchange，每次触发时用window.getSelection().getRangeAt(0)获取最新 Range，并更新迭代器内部位置索引 - 提供
seek(range)方法，根据任意 Range 快速定位到迭代器中的对应序号（需预构建节点→索引映射表或二分查找） - 对键盘导航（←→↑↓、Ctrl+←→）封装专用方法，如
moveToNextWord()或moveToBlockStart()，底层复用同一套遍历逻辑，确保行为一致
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
