本文详解如何使用 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 的起始点，确保语义和视觉位置正确；
- 异常兜底很重要：用户可能选中
- 撤销支持需额外设计：如需“取消高亮”，建议记录被包装的 并提供 unwrap() 逻辑（用 parentNode.replaceChild(span.firstChild, span)）。
此方案完全遵循 DOM 规范，兼容所有现代浏览器（Chrome/Firefox/Safari/Edge），且无需依赖第三方库，是实现跨段落文本高亮最简洁、鲁棒的原生方案。
