移除window.selection后DOM未重建引发文本高亮异常的问题排查

实现段落文本高亮功能时遇到异常：用户移除选中的高亮后，段落有时无法重新渲染，导致后续新建或修改高亮时，文本会从DOM中消失。

场景详情 #

• 原始段落代码：

<p>Over the last few weeks you have learned how a philosophical commitment to naturalism has led the scientific community to disallow the possibility of a supernatural explanation of the origin of our universe and the origin of life. You have also seen that this commitment is not based on scientifically observed data, and in fact, conveniently throws aside the very methodology that modern science claims to be built upon. The battle between modern science and the Bible is a battle of worldviews. It is not an argument about the facts that can be observed, but the explanations offered to account for them.</p>

• 用户高亮选中部分：...learned how a philosophical commitment to...
• 移除高亮后预期内容：...learned how a philosophical commitment to...

当前实现代码 #

surroundSelection(action) {
        var span = document.createElement("span")
        
        if(action == 'highlight')
            span.className = 'highlighted'

        var sel = window.getSelection()
        
        if(action == 'remove') {
            let ancestor = sel.anchorNode.parentNode.parentNode
            let parent = sel.anchorNode.parentElement
            
            ancestor.insertBefore(sel.anchorNode, parent)
            sel.anchorNode.remove()
        }
        if (window.getSelection) {
            
            if (sel.rangeCount) {
                var range = this.selectedRange.cloneRange()
            
                if(action == 'highlight')
                    range.surroundContents(span)

                sel.removeAllRanges()
                sel.addRange(range)
            }
        }
        this.saveHighlight(sel)
    }

问题分析与解决方案 #

问题根源 #

当前移除高亮的逻辑存在严重缺陷：

1. 仅针对anchorNode的父节点操作，未考虑选中范围覆盖多个高亮节点或跨普通文本节点的情况；
2. 操作DOM后未更新this.selectedRange，后续使用cloneRange()时拿到无效范围，引发DOM操作异常；
3. sel.anchorNode.remove()逻辑错误，直接删除文本节点而非移除高亮包裹。

修正后的实现逻辑 #

1. 移除高亮时，遍历选区内所有.highlighted元素，将元素子节点移动到高亮元素位置，再删除高亮元素；
2. 操作完成后重新创建有效选区范围，确保后续操作正确性；
3. 统一处理选区的获取与更新，避免无效引用。

修正后的代码 #

surroundSelection(action) {
    const sel = window.getSelection();
    if (!sel || sel.rangeCount === 0) return;

    const range = sel.getRangeAt(0);

    if (action === 'highlight') {
        const span = document.createElement("span");
        span.className = 'highlighted';
        try {
            // 包裹选区，处理简单文本选区情况
            range.surroundContents(span);
            // 更新选区到新的高亮元素
            sel.removeAllRanges();
            const newRange = document.createRange();
            newRange.selectNodeContents(span);
            sel.addRange(newRange);
        } catch (e) {
            // 扩展逻辑处理跨元素的复杂选区
            console.error("无法包裹选区：", e);
        }
    } else if (action === 'remove') {
        // 获取选区内所有高亮元素
        const highlightedElements = Array.from(range.commonAncestorContainer.querySelectorAll('.highlighted'));
        // 过滤出完全在选区内的目标元素
        const targetElements = highlightedElements.filter(el => range.intersectsNode(el) && range.containsNode(el, true));
        
        targetElements.forEach(el => {
            const parent = el.parentNode;
            // 将高亮元素的内容移至父节点，替换高亮元素
            while (el.firstChild) {
                parent.insertBefore(el.firstChild, el);
            }
            parent.removeChild(el);
        });

        // 重新设置选区到更新后的DOM范围
        sel.removeAllRanges();
        sel.addRange(range);
    }

    this.saveHighlight(sel);
}

关键改进点 #

• 移除高亮时批量处理选区内所有目标元素，覆盖多节点场景；
• 移动子节点保留原始内容，避免误删文本；
• 操作DOM后同步更新选区范围，消除无效引用；
• 增加异常捕获，处理跨元素的复杂选区情况。

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