HTML Selection API 文本选中高亮教程

本文深入剖析了HTML Selection API在文本选中与高亮实践中的核心陷阱与最佳实践：从必须前置校验`rangeCount === 0`以避免崩溃，到用`deleteContents() + insertNode()`安全替换内容、规避`surroundContents()`的脆弱性；从防``无限嵌套的包裹策略与优雅取消样式，到摒弃不可靠的`selectionchange`事件、转而结合`mouseup`/`touchend`精准捕获选区；再到强调Range对象的易失效特性——每次操作前需克隆、操作后须校验。所有“选中无响应”“高亮失败”“光标乱跳”的疑难杂症，根源几乎都在于绕过了Range这一关键抽象层——掌握它，才是精准操控用户选中的真正钥匙。

直接调用 window.getSelection() 拿到的是只读快照，不能改内容、不能赋值、不能当字符串塞回去——所有“选中后没反应”“高亮失败”“光标乱跳”，根源都在跳过了 Range 这一层。

必须先检查 selection.rangeCount === 0

很多脚本一上来就写 sel.getRangeAt(0)，结果报 IndexSizeError。这不是代码错，是根本没选中。

• 页面没聚焦（比如在 iframe 外点击）、contenteditable="false" 容器内、或跨源