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> 或 <code><textarea></textarea>）上，而不是整个window - 在
mouseup或click后立即读取，避免被其他脚本干扰选区 - 加一层判断：
if (selection.rangeCount > 0)，再取selection.getRangeAt(0) - Firefox 可能返回多个 Range（多段选区），但 Chrome/Edge 几乎总是 1 个，别硬写死
getRangeAt(0)就完事 - 先用
range.extractContents()拿出 DocumentFragment（内容从 DOM 移除） - 创建 wrapper 元素，比如
const mark = document.createElement('mark') -
mark.appendChild(extracted)，再range.insertNode(mark) - 如果不想删原内容，改用
range.cloneContents()+range.deleteContents()+range.insertNode() - 用
NodeIterator遍历所有Node.TEXT_NODE，累加textContent.length计算累计位置 - 找到目标字符落在哪个文本节点后，再用该节点的内部偏移调
setStart()和setEnd() - 注意：emoji（如 ??）或换行符（
\r\n）会影响.length，但通常够用；不要用String.prototype.codePointAt()去校验，太重
surroundContents() 在线运行器里基本等于摆设
range.surroundContents() 表面方便，实际限制极严：要求 Range 必须完全落在**单个文本节点内**，不能跨标签、不能含空格文本节点、不能起点终点在不同父元素下。在线运行器里随便写个 <p>hello <strong>world</strong></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>，选 “lo wo”，立马报 InvalidStateError: The range is not collapsed and does not select a single node。
替代方案更可靠：
setStart/setEnd 定位字符时偏移量容易算错
在线运行器里调试时，常以为“字符串第 5 个字符”就是 setStart(textNode, 5)，但 DOM 结构会让这个映射失效。例如：
<p>Hi <em>there</em>!</p> 中想选 “there”，它不在第一个文本节点（"Hi "）里，而在 <em></em> 的子文本节点中，偏移是 0，不是 3。
所以不能依赖 textContent 字符串索引。真要精确定位：
最易忽略的一点：DOM 修改后（比如你刚删了一段文字），原先计算好的 offset 会全部失效——每次操作前都应重新遍历定位，别缓存旧偏移。
