JavaScript中Range对象用于精准操作DOM选区，通过起点和终点节点及偏移量描述区域，支持删除、插入、包裹等操作；可从Selection获取或手动创建。
JavaScript 中利用 Range 对象精准操作选中的 DOM 片段，核心在于把用户“看到的选区”转化为可编程控制的文档区域。Range 不是视觉高亮本身，而是描述这个区域的精确坐标——起点和终点各自落在哪个节点、偏移多少字符或子节点。只要拿到这个坐标，就能安全地删、插、包、移，且不破坏周边结构。
从 Selection 获取 Range 是最常用入口
用户用鼠标或键盘选中内容后，浏览器会自动维护一个 Selection 对象，它内部装着一个或多个 Range。实际开发中几乎总是取第一个：
-
获取当前选区：
const sel = window.getSelection(); -
提取首个 Range：
const range = sel.getRangeAt(0);（若无选区会报错，需先判断sel.rangeCount > 0） - 此时
range.startContainer和range.endContainer告诉你起止在哪一节点，startOffset/endOffset告诉你具体位置——文本节点里是字符索引，元素节点里是子节点序号。
用 extractContents 或 deleteContents 清理原内容
想替换或格式化前，通常要先移除原始选区内容。两者区别关键在返回值：
Java 接口排错助手
下载
在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。
-
range.deleteContents()：直接从 DOM 中删除，不返回任何东西，适合“纯清除”场景。 -
const frag = range.extractContents()：删除并返回一个DocumentFragment，里面装着被移走的所有节点。你可以遍历、修改、重排后再插入，适合需要加工内容的逻辑（比如统一加 class、过滤 script 标签等）。
用 insertNode 或 surroundContents 插入新结构
清理完后，新内容要精准落回原位：
立即学习“Java免费学习笔记（深入）”；
-
range.insertNode(node)：在 Range 起点处插入一个节点。注意它只插一次，且插入后 Range 的终点会自动移到新节点之后。适合插入图标、分隔线、内联标签等单个节点。 -
range.surroundContents(wrapper)：用指定 wrapper 元素把整个 Range 内容包裹起来。要求 Range 必须连续且不能跨不可包裹的边界（比如不能一半在<td> 里一半在 <code><th> 里）。常用于加粗 <code><b></b>、斜体<i></i>、链接<a></a>等。 - 若
surroundContents报错，可退而求其次：先extractContents()拿到片段，再创建 wrapper，appendChild(frag)，最后range.insertNode(wrapper)。 -
定位文本节点某段：找到目标文本节点
textNode，调用range.setStart(textNode, 3)和range.setEnd(textNode, 8)，即可圈出第 4 到第 8 个字符。 -
跨节点选取：起点设在
p的第 0 个子节点（文本），终点设在p的第 2 个子节点（<i></i>元素），就能选中“文本+标签”这一整块。 -
快速选中整个元素内容：
range.selectNodeContents(element)，比手动算 offset 更简洁可靠。
手动创建 Range 实现非交互式操作
不依赖用户选中，也能用 Range 定位任意片段：
