Range 是 JavaScript 中精确控制文档文本选区的核心对象，由起点和终点定义，支持跨节点操作，需结合 Selection 实现界面反馈。
JavaScript 中的 Range 对象是精确控制文档中任意文本片段选择的核心工具，比 selection API 更底层、更灵活，适合实现高亮、富文本编辑、光标定位、跨节点选区等复杂场景。
理解 Range 的基本构成
Range 表示文档中连续的一段内容，由起点（startContainer / startOffset）和终点（endContainer / endOffset）共同定义。起点和终点可以是文本节点、元素节点，甚至跨不同父级——这是它能处理复杂结构的关键。
创建方式主要有两种：
-
document.createRange()：新建空 Range，再用setStart()、setEnd()或selectNode()等方法设定范围 -
getSelection().getRangeAt(0)：从当前用户选区中提取已存在的 Range（需确保有选区）
常见实用操作示例
以下操作均基于一个已创建并配置好的 range 实例：
立即学习“Java免费学习笔记（深入）”；
-
选中某段文本：先定位到目标文本节点（如
p.firstChild），再调用range.setStart(textNode, 2)和range.setEnd(textNode, 8) -
包裹选区内容（如加粗）：用
range.surroundContents(wrapperElement)，注意该方法要求 Range 必须完全位于单个元素内，否则会报错；更稳妥的方式是用extractContents()+insertNode()手动封装 -
高亮关键词而不破坏结构：遍历文本节点，对匹配位置创建 Range，用
range.cloneContents()提取后插入<mark></mark>元素，再用range.deleteContents()移除原文本 -
将光标/选区定位到指定位置：创建 Range 后，调用
selection.removeAllRanges()再selection.addRange(range)
处理边界与兼容性注意事项
实际使用中容易忽略几个关键细节：
-
Range不会自动归一化——比如起点在<span>ab</span><span>cd</span>的第一个span末尾，终点在第二个span开头，这属于合法跨节点 Range，但某些方法（如toString()）仍可正确返回 "bc" - 修改 DOM 后原有 Range 可能失效或偏移，建议在操作前调用
range.detach()（已废弃但部分老环境需考虑），或操作后重新创建 - IE 低版本使用
TextRange，现代开发只需关注标准 Range，但需确保不依赖已移除的属性（如range.commonAncestorContainer在所有主流浏览器中仍可用）
结合 Selection 实现用户交互增强
单纯操作 Range 并不触发界面反馈，必须配合 Selection 才能让用户看到效果：
- 监听
mouseup或selectionchange事件，用getSelection().getRangeAt(0)捕获用户选区 - 对选区做分析（如判断是否全在某个
contenteditable区域内），再生成新 Range 进行样式标记或替换 - 实现“点击空白处取消选区”时，可先
selection.removeAllRanges()，再手动创建并定位一个折叠 Range（range.collapse(true)）作为新光标位置
