surroundcontents总报rangeerror，因其强制要求起点和终点必须在同一text节点内，跨元素、含空格或换行均导致startcontainer与endcontainer不同而抛错；安全使用需前置校验nodetype为text_node且两容器相等，否则应改用extractcontents+insertnode组合。
surroundContents 为什么总报 RangeError
根本不是你选得不对，而是 surroundContents 对 Range 的边界有硬性要求：起点和终点必须在同一个 Text 节点内，且不能跨任何元素边界。哪怕只多一个空格、换行符或中间夹着一个 <strong></strong>，range.startContainer 和 range.endContainer 就会指向不同节点，立刻抛出 RangeError: The boundary points of a range must be the same。
常见触发场景：
- 选中 “
<p>Hello <strong>world</strong>!</p>” 中的 “lo wo” —— 起点在第一个文本节点，终点在<strong></strong>内的文本节点 - 在
white-space: pre区域里选中含换行的部分，浏览器可能把换行拆成多个文本节点 - 双击选词时，光标落在零宽空格（
\u200B）前后，导致 offset 落在相邻文本节点
怎么判断能不能用 surroundContents
别猜，直接校验。只要不满足以下两个条件，就别调 surroundContents：
range.startContainer.nodeType === Node.TEXT_NODErange.startContainer === range.endContainer
校验代码必须写在调用前：
const selection = window.getSelection();
if (selection.rangeCount === 0) return;
const range = selection.getRangeAt(0);
if (
range.startContainer.nodeType !== Node.TEXT_NODE ||
range.startContainer !== range.endContainer
) {
// 改走 extractContents + insertNode 路线
return;
}
// 此时才能安全调用
const span = document.createElement('span');
span.className = 'highlight';
range.surroundContents(span);
surroundContents 成功后 DOM 会怎样
surroundContents 不是“套一层壳”，而是把原内容整个移出、塞进新元素、再放回原位。这意味着：
- 原选中文本节点会被拆开：比如选中 “abc” 中的 “bc”，
surroundContents会把 “b” 和 “c” 所在的文本节点切开，生成两个新文本节点包裹在span里 - 原
range立即失效，后续操作需重新获取选区 - 如果被包裹的内容里已有事件监听器或
input光标，这些状态都会丢失 —— 它不保留上下文
所以它只适合简单高亮、无交互需求的纯文本场景；一旦涉及可编辑区域或需要保留焦点，就得换方案。
跨节点选区该用什么替代 surroundContents
真正能覆盖所有场景的是 extractContents() + insertNode() 组合：
-
range.extractContents()拿出文档片段（内容已从 DOM 移除） - 新建容器（如
document.createElement('mark')），再用appendChild()把片段塞进去 -
range.insertNode(container)插入原位置
这个流程不依赖节点一致性，支持任意复杂结构，还能手动控制插入后光标位置。唯一要注意的是：extractContents() 是破坏性的，若需保留原始 DOM 结构，应先用 cloneContents()，再配 deleteContents()。
真实项目里，surroundContents 几乎只在极简 demo 里出现；生产环境几乎全靠手动提取+插入来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
