Range对象需显式绑定到Selection或调用DOM操作方法才生效；常见错误包括未addRange、DOM未加载就操作、忽略rangeCount判断及surroundContents的严格限制；精确定位须遍历文本节点而非依赖textContent索引。
Range 对象在在线运行器里根本不会自动生效
直接写 document.createRange() 不会高亮、不触发渲染、也不影响用户看到的内容——它只是个内存对象。在线运行器（比如 JSFiddle、CodePen、RunJS）和普通页面一样，必须显式把 Range 绑定到 Selection 才能让用户看见选区，或者调用 deleteContents()、extractContents() 等方法才真正操作 DOM。
常见错误是只创建了 Range，却忘了下一步：
- 没用
selection.addRange(range)把它加进当前选区 → 页面毫无反应 - 对空选区（
getSelection().rangeCount === 0）直接调getRangeAt(0)→ 报错IndexSizeError - 在
DOMContentLoaded之前就执行 Range 操作 → 目标节点还没加载，getElementById返回null
用 getSelection().getRangeAt(0) 获取用户真实选区最稳妥
用户手动划词产生的选区，永远要从 window.getSelection() 拿，不是靠 document.createRange() 新建。尤其在在线运行器中，HTML 和 JS 常分栏编辑，DOM 加载时机更需留意。
正确姿势：
立即学习“前端免费学习笔记（深入）”；
- 确保事件监听绑定在可编辑区域（如
contenteditable="true"的<div>或<textarea>）上，而不是整个window - 在
mouseup或click后立即读取，避免被其他脚本干扰选区 - 加一层判断：
if (selection.rangeCount > 0)，再取selection.getRangeAt(0) - Firefox 可能返回多个 Range（多段选区），但 Chrome/Edge 几乎总是 1 个，别硬写死
getRangeAt(0)就完事
surroundContents() 在线运行器里基本等于摆设
range.surroundContents() 表面方便，实际限制极严：要求 Range 必须完全落在**单个文本节点内**，不能跨标签、不能含空格文本节点、不能起点终点在不同父元素下。在线运行器里随便写个 <p>hello <strong>world</strong></p>，选 “lo wo”，立马报 InvalidStateError: The range is not collapsed and does not select a single node。
替代方案更可靠：
- 先用
range.extractContents()拿出 DocumentFragment（内容从 DOM 移除） - 创建 wrapper 元素，比如
const mark = document.createElement('mark') -
mark.appendChild(extracted)，再range.insertNode(mark) - 如果不想删原内容，改用
range.cloneContents()+range.deleteContents()+range.insertNode()
setStart/setEnd 定位字符时偏移量容易算错
在线运行器里调试时，常以为“字符串第 5 个字符”就是 setStart(textNode, 5)，但 DOM 结构会让这个映射失效。例如：
<p>Hi <em>there</em>!</p> 中想选 “there”，它不在第一个文本节点（"Hi "）里，而在 <em> 的子文本节点中，偏移是 0，不是 3。
所以不能依赖 textContent 字符串索引。真要精确定位：
- 用
NodeIterator遍历所有Node.TEXT_NODE，累加textContent.length计算累计位置 - 找到目标字符落在哪个文本节点后，再用该节点的内部偏移调
setStart()和setEnd() - 注意：emoji（如 ??）或换行符（
\r\n）会影响.length，但通常够用；不要用String.prototype.codePointAt()去校验，太重
最易忽略的一点：DOM 修改后（比如你刚删了一段文字），原先计算好的 offset 会全部失效——每次操作前都应重新遍历定位，别缓存旧偏移。
