setstart/setend必须作用于同一文本节点，跨节点需拆分range；offset基于textcontent的utf-16码元数，勿用innertext推算；dom变动后须重算offset并重建range。
setStart/setEnd 必须作用于文本节点，不能直接传父容器
想高亮 “hello world” 中的 “world”，setStart(container, 6) 是错的——container 是 <p></p> 元素节点，偏移量 6 对它来说是第 6 个子节点（比如第 6 个 <span></span>），不是第 6 个字符。
正确做法是先找到包裹目标文字的 Text 节点（nodeType === 3），再对它调用：
range.setStart(textNode, startCharIndex)range.setEnd(textNode, endCharIndex)
如果“world”被 <strong>hello</strong> world 包裹，那它实际在第二个文本节点里，起始偏移是 0，不是 6。直接用 textContent 字符串索引去算会错位。
跨文本节点时不能单靠 setEnd —— 得拆成多个 Range
关键词横跨两个相邻文本节点（例如 <span>hel</span>lo world，搜索 “llo”）时，setStart 和 setEnd 的两个参数必须属于**同一个祖先节点**，否则 Range 构建失败或行为未定义。
此时不能强行传两个不同 Text 节点给 setEnd，而应：
- 识别出命中位置跨越了节点边界
- 为前半段创建一个
Range（落在第一个文本节点内） - 为后半段另建一个
Range（落在第二个文本节点内） - 分别处理（如各自
surroundContents()或加入CSS.highlights）
浏览器不会自动帮你合并或桥接——这是最容易漏掉的兜底逻辑。
offset 是字符位置，但要注意 Unicode 和换行符
textNode.textContent.length 返回的是 UTF-16 码元数，对绝大多数场景够用，但需注意：
-
\r\n算两个字符，不是 1 个 - emoji 如
??可能由多个码元组成，.length值可能为 2、4 或更多，但通常仍可作为偏移基准 - 中文、日文、韩文等统一按 1 字符计，没问题
- 若用正则匹配定位，务必在
textNode.textContent上执行，而非整个容器的innerText
别用 innerText 的长度去反推文本节点内的 offset——它会折叠空白、忽略隐藏元素、丢失换行语义，完全不可靠。
修改 DOM 后，旧 Range 的 offset 会失效
一旦你调用过 range.deleteContents() 或插入新节点，原 Range 的 startOffset/endOffset 就不再对应当前 DOM 状态。继续用它 surroundContents() 可能删错内容、包错范围，甚至静默失败。
- 高频操作（如逐词高亮）中，每次处理前都应重新获取文本节点并重算 offset
- 避免长期持有未 detach 的
Range实例；必要时调用range.detach()显式释放 - 若用
CSS.highlights，每次更新都要重建Highlight实例，不能复用旧Range
真正麻烦的从来不是怎么设起点终点，而是怎么确保这两个点在 DOM 变动后依然指得准——这需要把“找节点 + 算偏移”封装成可重入函数，而不是写一次就扔那儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
