如何利用window.getSelection和Range对象实现网页富文本自定义标记的长尾关键词疑问？

本文共计878个文字，预计阅读时间需要4分钟。

直接调用 `getRangeAt(0)` 前，必须确认当前 `selection` 有有效范围。如果没有，将返回 `undefined` 或抛出错误。常见问题包括用户未选中文本或点击了编辑区域外。

实操建议：

• 先判断 selection.rangeCount > 0，再取范围；否则忽略或提示“请先选中文字”
• 注意 iframe 场景：跨 iframe 时 window.getSelection() 拿到的是父窗口的 selection，需切换到子窗口上下文执行
• React/Vue 等框架中，事件回调里调用要加 setTimeout(..., 0) 或 requestAnimationFrame，避免因虚拟 DOM 更新时机导致 selection 尚未同步

用 Range.surroundContents 包裹选中文本失败的典型原因

surroundContents 要求选区必须完全落在一个文本节点内（不能跨标签、不能包含块级元素），否则抛出 InvalidStateError。这是富文本标记功能中最常卡住的地方。

实操建议：

• 优先改用 Range.extractContents() + 手动插入包装节点（如 <mark>）+ Range.insertNode() 组合，兼容任意选区结构
• 若坚持用 surroundContents，先用 Range.cloneContents().textContent 判断是否纯文本，再用 Range.commonAncestorContainer 检查是否单文本节点
• 注意：surroundContents 会自动剥离原位置内容，不保留空白文本节点，可能影响排版——需要手动补空格或使用 white-space: pre-wrap

标记后如何保持 selection 可继续操作

对选区做 DOM 修改后，原 Range 对象会失效（detached），再次调用 getRangeAt(0) 可能指向错误位置，导致后续标记错位或丢失光标。

实操建议：

• 修改前用 range.cloneRange() 备份起止位置，操作后再用 range.selectNodeContents(newNode) 或 range.setStartAfter() 主动恢复光标
• 更稳妥的做法是：标记完成后，用 window.getSelection().removeAllRanges() 清空，再用新节点生成新 Range 并添加回去
• 若支持取消标记，需记录原始文本节点和偏移量（range.startContainer、range.startOffset），而非依赖 DOM 结构不变

不同浏览器对 Range 的 start/end 容器处理差异

Chrome 和 Safari 在处理换行、inline 元素嵌套时，startContainer 可能是 Text 节点，而 Firefox 有时返回其父 Element，导致 startOffset 计算逻辑不一致。

实操建议：

• 统一用 Range.toString() 获取实际选中文本，避免依赖容器类型做字符串截取
• 定位还原时，优先用 Range.intersectsNode() + 深度遍历查找匹配文本，而不是硬算 offset
• 对 contenteditable 区域，监听 input 和 selectionchange 双事件，因为部分浏览器（如旧版 Edge）在输入后不触发 selectionchange

实际做富文本标记时，最麻烦的不是加标签，而是撤销、嵌套标记、与输入法共存、以及服务端存储时还原 DOM 结构——这些都得靠精确的 Range 坐标 + 文本快照双保险，单靠 DOM diff 很难可靠回溯。