文本高亮功能Bug求助：无法高亮大段文本及单个字符重复高亮问题

核心问题拆解 #

你的代码存在两个致命问题，根源都是依赖文本内容的全局正则替换，而非直接操作选区对应的DOM节点：

• 单个字符全匹配：正则的g修饰符会把所有和选中字符相同的文本都高亮，完全忽略了“仅高亮选中部分”的需求。
• 大段文本无法高亮：window.getSelection().toString()拿到的是纯文本，但原DOM里的文本可能被拆成多个文本节点，或者存在换行、空格的格式差异，正则无法精准匹配到选中的对应位置；快速选中时，选区的Range对象还没稳定，纯文本匹配就更难命中。
• 额外隐患：反复修改innerHTML会破坏原有DOM结构，比如之前添加的高亮<span>会被重新解析，可能导致嵌套混乱。

修复方案 #

正确的思路是直接操作选区的Range对象，精准定位选中的DOM片段，然后包裹高亮标签；清除高亮时直接移除所有高亮标签，恢复原始文本结构。

完整修复代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    #removeHighlight {
      margin: 50px;
    }
    .highlight {
        background-color: yellow;
    }
</style>
</head>
<body>
  <div id="content">
    Lorem ipsum dolor sit amet, cu eum eros vitae persequeris, laudem possit nam ex. Labore eloquentiam per an. Sit ex omnesque interpretaris, habeo tantas eos ad, ea eos ludus inciderint. Facete tritani pro ei, vim evertitur liberavisse ex. Ridens indoctum
    duo cu, est utamur aliquando expetendis ne. Cum nusquam definiebas ex, id esse neglegentur cum, eu libris bonorum volumus vis. Ius et quis omnis graeco, no his nullam perpetua dissentiet. No vix possim scripserit consequuntur, te mnesarchum philosophia
    sed. Ne mea putent iudicabit, in eam ipsum viris dicunt. Eum amet accommodare ex, sint malis adversarium at qui.
  </div>
  <div><button id="removeHighlight" style="color:green">Clear</button></div>

  <script>
    function highlightSelectedText() {
        const selection = window.getSelection();
        // 空选区或选中的是元素节点（不是文本）则跳过
        if (!selection.rangeCount || selection.isCollapsed) return;

        const range = selection.getRangeAt(0);
        // 创建高亮span
        const highlightSpan = document.createElement('span');
        highlightSpan.className = 'highlight';

        // 把选中的内容包裹到span里，自动处理跨文本节点的情况
        range.surroundContents(highlightSpan);
        
        // 清除选区，避免重复触发
        selection.removeAllRanges();
    }

    // 优化事件触发：只在content区域内的mouseup/keyup触发，避免全局误触发
    const contentDiv = document.getElementById('content');
    contentDiv.addEventListener('mouseup', highlightSelectedText);
    contentDiv.addEventListener('keyup', (e) => {
        // 只处理选中相关的按键（比如Ctrl+A）
        if (e.key === 'a' && e.ctrlKey) {
            setTimeout(highlightSelectedText, 0);
        }
    });

    function clearSelections() {
        const highlights = contentDiv.querySelectorAll('.highlight');
        highlights.forEach(span => {
            // 把span的子节点移到父节点，然后删除span
            const parent = span.parentNode;
            while (span.firstChild) {
                parent.insertBefore(span.firstChild, span);
            }
            parent.removeChild(span);
        });
    }
    document.getElementById("removeHighlight").addEventListener("click", clearSelections);
  </script>
</body>
</html>

关键修复点说明 #

1. 精准操作选区Range：用window.getSelection().getRangeAt(0)获取选中的范围，调用range.surroundContents()直接把选中的内容包裹到高亮span里，自动处理跨多个文本节点的情况，完全避免文本匹配的误差。
2. 避免全局替换：只对选中的DOM片段进行操作，不会影响其他相同文本。
3. 优化事件触发：把事件绑定在content元素上，避免全局触发；按键事件只处理选中相关的操作，减少误触发。
4. 安全清除高亮：直接遍历所有高亮span，将其内部内容移回父节点后删除span，不会破坏原有DOM结构。

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