文本高亮方法全解析：实用技巧大汇总

本文深入解析了如何用原生 JavaScript 稳健实现跨段落文本高亮——直击 `surroundContents()` 在多节点选区下必然报错的痛点，揭示 `extractContents()` 与 `insertNode()` 组合才是兼容现代浏览器、支持任意复杂 DOM 结构（含嵌套标签、多段落）的真正可靠方案，并提供开箱即用的生产级代码、关键注意事项及优雅降级策略，让开发者轻松写出健壮、可维护、无需依赖库的高亮功能。

本文详解如何使用 JavaScript 的 Range API 正确实现跨段落文本高亮，避免 `surroundContents` 报错，并提供稳定、兼容的解决方案。

当用户用鼠标拖选跨越多个

元素的文本时（例如从第一段末尾拖到第二段开头），浏览器返回的 Range 对象会横跨多个独立的 DOM 节点。此时若直接调用 range.surroundContents(element)，会触发 DOMException: An attempt was made to use an object that is not, or is no longer, usable 错误——因为 surroundContents() 严格要求 Range 必须完全包含在一个连续、可包裹的父节点内（即起止点需位于同一元素内部，且不能跨元素边界）。而跨段落选择天然违反这一前提。

正确的解决思路是：不尝试用单个 “包围”整个跨段落范围，而是将选区内容“提取出来”，再插入一个新创建的 作为容器节点。这正是 extractContents() + insertNode() 组合的核心价值：

• selectedRange.extractContents()：安全地剪切并返回选区内的所有 DOM 节点（无论是否跨元素），同时从原文档中移除它们；
• selectedRange.insertNode(span)：将新建的 插入到原选区的起始位置（即光标/选区锚点处），再把已提取的内容追加进该 内。

以下是生产就绪的完整实现（含防空选、兼容性处理）：

document.addEventListener("DOMContentLoaded", () => {
  document.addEventListener("mouseup", function (e) {
    const selection = window.getSelection();
    // 防止无选区或选区为空
    if (!selection.rangeCount || selection.toString().trim() === "") return;

    try {
      const range = selection.getRangeAt(0);
      // 创建高亮容器
      const highlight = document.createElement("span");
      highlight.className = "highlight"; // 推荐用 class 而非内联样式，便于统一管理
      highlight.appendChild(range.extractContents());
      range.insertNode(highlight);
    } catch (err) {
      console.warn("高亮失败：", err.message);
      // 可选：降级为仅高亮首个段落内的部分（根据业务需求扩展）
    }
  });
});

配套 CSS（推荐使用类名控制样式）：

.highlight {
  background-color: #E8E288;
  padding: 1px 0; /* 微调避免行高异常 */
}

⚠️ 注意事项：

• 不要滥用 surroundContents：它仅适用于“单节点内纯文本”场景（如

  abc

  中选中 bc），跨节点、含嵌套标签时必报错；
• extractContents() 是关键：它将选区内容序列化为文档片段（DocumentFragment），天然支持跨元素结构；
• 插入位置精准：insertNode() 将 插入到 Range 的起始点，确保语义和视觉位置正确；
• 异常兜底很重要：用户可能选中