JavaScript跨段落文本高亮报错求助：DOMException问题

错误原因 #

你遇到的DOMException是因为Range.surroundContents()方法有严格限制：它要求选中的Range必须完全属于单个父DOM节点，不能跨越多个元素（比如不同的<p>标签）。跨段落选中文本时，Range的起始和结束节点分属不同父元素，直接调用这个方法就会触发错误。

解决方案 #

确实需要拆分跨段落的选区，对每个选中的文本片段单独用<span>包裹。下面是可行的实现方案，同时避免extractContents导致的问题：

完整代码实现 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .highlight {
            background-color: #E8E288;
        }
    </style>
</head>
<body>
    <p>第一段文本，用于测试跨段落高亮功能。</p>
    <p>第二段文本，选中第一段末尾和第二段开头试试。</p>
    <p>第三段文本，多段落选中也能正常高亮。</p>

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            document.addEventListener("mouseup", () => {
                const selection = window.getSelection();
                // 空选区直接返回
                if (selection.isCollapsed || selection.rangeCount === 0) return;

                // 复制选区，避免操作原选区导致的异常
                const range = selection.getRangeAt(0).cloneRange();
                const highlightClass = "highlight";

                // 处理跨元素选区的核心方法：遍历选中的所有文本节点片段
                function highlightRange(range) {
                    // 如果选中的是单个文本节点，直接包裹
                    if (range.startContainer === range.endContainer && range.startContainer.nodeType === Node.TEXT_NODE) {
                        const span = document.createElement("span");
                        span.className = highlightClass;
                        range.surroundContents(span);
                        return;
                    }

                    // 拆分起始节点的文本
                    if (range.startContainer.nodeType === Node.TEXT_NODE) {
                        const splitNode = range.startContainer.splitText(range.startOffset);
                        // 更新range的起始位置到拆分后的新节点
                        range.setStart(splitNode, 0);
                    }

                    // 拆分结束节点的文本
                    if (range.endContainer.nodeType === Node.TEXT_NODE) {
                        range.endContainer.splitText(range.endOffset);
                    }

                    // 遍历range内的所有节点，逐个处理
                    const walker = document.createNodeIterator(
                        range.commonAncestorContainer,
                        NodeFilter.SHOW_TEXT,
                        node => range.contains(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
                    );

                    let node;
                    while (node = walker.nextNode()) {
                        const span = document.createElement("span");
                        span.className = highlightClass;
                        // 包裹单个文本节点
                        node.parentNode.replaceChild(span, node);
                        span.appendChild(node);
                    }
                }

                highlightRange(range);
                // 清除选中状态
                selection.removeAllRanges();
            });
        });
    </script>
</body>
</html>

关键细节说明 #

• 避免操作原选区：用cloneRange()复制选区，防止修改原选区导致的DOM状态异常
• 拆分文本节点：当选中的是文本节点的一部分时，用splitText()把文本拆分成独立节点，确保每个高亮片段都是完整的文本节点
• 节点遍历器：用NodeIterator遍历选区范围内的所有文本节点，逐个用<span>包裹，这样不管跨多少段落都能处理
• 替换全局span样式：给高亮span加专属类名.highlight，避免影响页面其他span元素

关于extractContents的问题 #

你之前用extractContents失效，是因为这个方法会把选中的内容从DOM中移除，如果直接把移除的内容塞进span再插入，需要严格保持DOM结构的完整性，稍不注意就会破坏原文档流。上面的方案不需要移除内容，直接在原位置包裹节点，更安全可靠。

内容的提问来源于stack exchange，提问作者JohnatanFranck