可通过span包裹选中文本并设background-color实现高亮，核心是window.getselection()与range api；优先用surroundcontents()，跨节点时改用extractcontents()+insertnode()确保兼容性。

可以通过创建一个 span 元素包裹选中的文本节点，并设置其 background-color 来实现高亮，核心是利用 window.getSelection() 和 Range API 操作 DOM。

获取当前选中文本的 Range

浏览器提供 getSelection() 获取用户选区，它返回一个 Selection 对象，再用 getRangeAt(0) 取出首个选中范围（多区域选中较少见，通常只处理第一个）：

注意：需确保页面有有效选中（比如鼠标拖选），否则 range 可能为空或抛错。

• 检查 selection.rangeCount > 0 再继续
• 用 range.cloneContents() 可预览内容，但高亮不推荐直接操作克隆节点
• 优先使用 range.extractContents() 或 surroundContents() 修改原 DOM

用 surroundContents() 包裹并高亮

这是最简洁的方式：新建一个带样式的 span，把选中内容“套进去”：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 创建 span：const span = document.createElement('span');
• 设置样式：span.style.backgroundColor = '#ffeb3b';（或其他高亮色）
• 调用 range.surroundContents(span)
• ⚠️ 注意：surroundContents 要求选区必须完全在单个可编辑元素内（如 p、div），且不能跨多个独立文本节点（比如选中了两个 TextNode 中间有 element 隔开），否则会报错

兼容跨节点、复杂结构的方案（推荐）

当选区跨越多个文本节点或嵌套元素时，用 extractContents() + 手动插入更可靠：

• 调用 range.extractContents() 拿到文档片段（DocumentFragment）
• 新建 span 并设置背景色
• 把片段追加进 span：span.appendChild(fragment);
• 用 range.insertNode(span) 把高亮后的 span 插入原位置
• 这样能安全处理混合节点（如文字+em+文字）、跨行、跨块级元素等情况

取消高亮（可选补充）

若需支持取消，可给高亮 span 添加特定 class（如 highlight），后续用 document.querySelectorAll('.highlight') 找到并用 replaceWith(...childNodes) 还原原始文本节点。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南