网页多区域文本高亮实现求助：跨标签选择触发DOMException问题

我太懂这个痛点了——当选中的文本跨越多块不同的标签（比如连续的<p>段落）时，直接套<span>会把DOM结构搅乱，触发DOMException简直是必然的。这本质上是因为浏览器不允许你随意拆分父元素的内容来嵌套新标签，得换更稳妥的方式处理选区内容。

下面是几个经过实践验证的解决思路：

1. 拆分选区为独立Range，逐个处理跨标签片段 #

浏览器的Selection对象可以拆解成多个Range（每个Range对应选中区域里单个标签内的片段），你可以遍历这些Range分别做高亮处理：

• 先通过window.getSelection()拿到当前选区
• 循环处理每个Range：
  • 如果Range完全在单个文本节点内，直接用<span>包裹即可
  • 如果Range跨节点，调用splitText()把文本节点拆成「选中前」「选中中」「选中后」三部分，再给中间的片段套高亮标签
  • 记得清理拆分后产生的空文本节点，避免DOM冗余

核心代码示例：

const selection = window.getSelection();
if (!selection.rangeCount) return;

// 遍历所有选中的Range片段
for (let i = 0; i < selection.rangeCount; i++) {
  const range = selection.getRangeAt(i);
  const startNode = range.startContainer;
  const endNode = range.endContainer;

  // 选中内容在同一个文本节点内的情况
  if (startNode === endNode && startNode.nodeType === Node.TEXT_NODE) {
    const highlightSpan = document.createElement('span');
    highlightSpan.className = 'text-highlight';
    range.surroundContents(highlightSpan);
  } else {
    // 处理跨节点的选区：拆分起始和结束文本节点
    const startSplitNode = startNode.splitText(range.startOffset);
    const endSplitNode = endNode.splitText(range.endOffset);
    
    // 针对拆分后的中间内容创建新Range并包裹高亮标签
    const newRange = document.createRange();
    newRange.setStart(startSplitNode, 0);
    newRange.setEnd(endSplitNode, 0);
    
    const highlightSpan = document.createElement('span');
    highlightSpan.className = 'text-highlight';
    newRange.surroundContents(highlightSpan);
    
    // 清理拆分后产生的空文本节点
    if (endNode.textContent.trim() === '') endNode.remove();
  }
}
// 清除选区，避免重复触发
selection.removeAllRanges();

2. 用document.execCommand快速实现（兼容性好但已废弃） #

虽然execCommand已被标准标记为废弃，但目前主流浏览器仍支持它，适合快速搭建原型：

// 直接调用高亮命令，浏览器自动处理跨标签逻辑
document.execCommand('hiliteColor', false, '#fff380');

这个方法会自动帮你拆分节点并添加内联样式的<span>，缺点是样式不好统一管理，且未来可能被移除，不推荐在生产环境长期使用。

3. 借助成熟的文本高亮库 #

如果不想自己啃DOM操作的硬骨头，直接用现成库更省心：

• Rangy：专注于选区和Range操作的工具库，完美解决跨元素高亮的各种边界情况
• Mark.js：支持文本搜索、选区高亮，内置了跨元素处理逻辑
  这些库已经封装了所有复杂的DOM处理细节，能帮你节省大量调试时间。

额外注意点 #

• 高亮标签尽量用<span>这类行内元素，别用块级元素，避免破坏原页面布局
• 可以给每个高亮标签加唯一ID，方便后续实现取消高亮、保存高亮位置等功能
• 处理完选区后记得清除选中状态，防止重复触发高亮逻辑

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