JavaScript：使用surroundContents创建元素时，新选区重叠旧选区会报错

嘿，我完全懂你现在遇到的麻烦——重叠选区触发的DOM报错、移除高亮时的文本碎片化，这些DOM操作的坑确实挺闹心的。咱们一步步把这些问题捋清楚，再给你一个可行的解决方案。

问题根源拆解 #

1. 重叠选区的DOMException：你用surroundContents包裹选区时，如果选区内包含了已经存在的<span class="hl">（非文本节点），但又没完全选中这个节点，就会抛出异常。因为surroundContents的规则是：选区要么完全包含非文本节点，要么只选中纯文本节点，半选非文本节点是不被允许的。
2. 移除高亮的碎片问题：直接移除hl类只会去掉样式，但<span>节点还留在DOM里；直接删除节点又会连里面的文本一起删掉，两种操作都会破坏原有的文本结构。

完整解决方案代码 #

我们需要修改两个核心逻辑：处理选区高亮前先“扁平化”已有的高亮节点，移除高亮时用纯文本节点替换高亮span。

JavaScript 代码 #

// HIGHLIGHT SELECTIONS
const elementToHighlight = document.getElementById('higlight-this');
elementToHighlight.addEventListener('mouseup', selection);

function selection() {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return; // 没有选区直接退出
  const targetRange = selection.getRangeAt(0);
  
  // 先把选区范围内的所有高亮节点“扁平化”：移除span，保留纯文本
  const existingHighlights = targetRange.commonAncestorContainer.querySelectorAll('.hl');
  existingHighlights.forEach(span => {
    const spanRange = document.createRange();
    spanRange.selectNodeContents(span);
    // 只处理和当前选区有重叠的高亮节点
    if (targetRange.intersectsNode(span)) {
      const textNode = document.createTextNode(span.textContent);
      span.parentNode.replaceChild(textNode, span);
    }
  });
  
  // 重新构建选区（因为DOM结构已经改变）
  const newRange = document.createRange();
  newRange.setStart(targetRange.startContainer, targetRange.startOffset);
  newRange.setEnd(targetRange.endContainer, targetRange.endOffset);
  
  // 创建高亮节点并包裹选区
  const highlightSpan = document.createElement('span');
  highlightSpan.classList.add('hl');
  try {
    newRange.surroundContents(highlightSpan);
  } catch (e) {
    console.warn('无法处理该选区（可能包含非文本节点）:', e);
  }
  
  // 清除选区，避免重复触发
  selection.removeAllRanges();
}

// REMOVE ALL HIGHLIGHTS
const removeButton = document.getElementById('remove');
removeButton.addEventListener('click', () => {
  const allHighlights = document.querySelectorAll('#higlight-this .hl');
  allHighlights.forEach(span => {
    // 用纯文本节点替换高亮span，完全还原DOM结构
    const textNode = document.createTextNode(span.textContent);
    span.parentNode.replaceChild(textNode, span);
  });
});

CSS 样式 #

.hl {
  background-color: yellow;
}

HTML 结构 #

<section id="higlight-this">
  <p>Some text to test with. Make it look good with highlights!.<br>
  If you don't, It won't be useful for you.</p>
</section>
<button id="remove">remove</button>

关键改进点说明 #

• 处理重叠选区：在包裹新选区前，先把选区内的已有高亮节点替换成纯文本，确保新选区只包含文本节点，避免surroundContents抛出异常。
• 正确移除高亮：用replaceChild把高亮span替换成对应的文本节点，既保留了原文本内容，又彻底清除了多余的span标签，不会留下空节点或文本碎片。
• 容错处理：添加了选区为空的判断和try-catch块，避免无意义的报错影响功能运行。

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