window.getselection() 获取用户当前选区，document.createrange() 创建可编程操作的范围，二者配合实现文本读写、高亮与格式化。
直接用 window.getSelection() 和 document.createRange() 就能精准控制文本选中，关键在于理解 Selection 是“用户当前选了什么”，Range 是“你想操作哪一段”。两者配合，就能读、写、高亮、格式化任意文本片段。
获取和判断当前选区
用户拖选后，浏览器自动维护一个全局 Selection 对象：
- 用
const sel = window.getSelection()获取它 -
sel.toString()直接拿到选中的纯文本 -
sel.rangeCount === 0表示没选中任何内容（比如只有光标） -
sel.isCollapsed为true说明是光标状态（起止点重合） - 选区起点和终点分别存在
sel.anchorNode/anchorOffset与focusNode/focusOffset中，注意它们可能落在不同节点里
创建并定位一个 Range
Range 不依赖用户操作，可由代码主动构造，用于高亮、插入或格式化：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 先调用
const range = document.createRange() - 若目标在纯文本节点内（如
<td>Hello world</td>），直接设偏移：range.setStart(textNode, 3)range.setEnd(textNode, 8)
这就圈出 “lo wor” - 若目标跨多个子节点（如
<p>Hi <em>there</em>.</p>），可用元素节点作参考：range.setStart(p, 0)（从第 0 个子节点开始）range.setEnd(p, 2)（到第 2 个子节点前为止） - 常用快捷方法：
range.selectNodeContents(el)选中整个元素内容；range.collapse(false)折叠到末尾变成光标
把 Range 应用到页面选区
有了 Range，要让它真正显示为蓝色高亮，必须交给 Selection：
- 先清空现有选区：
sel.removeAllRanges() - 再添加你的 Range：
sel.addRange(range) - 如果只是想把光标移到某处（比如编辑器末尾），创建 Range 后折叠再添加即可
- 注意：一次只能看到一个 Range 高亮；多 Range（Ctrl 多选）在多数浏览器中受限，不建议依赖
对选区内容做实际操作
拿到 Range 后，就能执行富文本编辑的核心动作：
-
range.cloneContents()复制选中部分的 DOM 片段（含标签） -
range.deleteContents()删除选中内容，DOM 自动重排 -
range.surroundContents(document.createElement('strong'))把选中文本包裹进<strong></strong> - 若需插入新节点（如图标、链接），可用
range.insertNode(node) - 所有这些操作都基于 Range 的精确边界，不会误伤周边结构
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
