如何移除选中文本内已被span包裹元素的span标签？

要解决选中内容与已存在的加粗span重叠时移除对应span的问题，你可以按照以下逻辑实现：

核心思路 #

1. 精准识别目标span：给用于加粗的span添加专属类名（如editor-bold），避免误操作页面中其他无关的span标签。
2. 检测选中范围与span的重叠关系：通过Range的intersectsNode方法判断哪些span处于选中范围内或与选中范围重叠。
3. 解包裹span标签：将span内部的文本节点保留，仅移除span容器本身，确保文本内容不丢失。
4. 恢复选中范围：DOM结构变更后重新设置选中范围，保证后续的surroundSelection操作能作用于正确的文本。

完整代码实现 #

// 创建用于加粗的span，添加专属类名方便识别
const el = document.createElement('span');
el.classList.add('editor-bold');
el.style.fontWeight = '700';

function handleNodeWrap() {
  const selection = window.getSelection();
  // 无选中内容时直接返回
  if (!selection || selection.rangeCount === 0) return;

  const range = selection.getRangeAt(0);
  
  // 筛选出与选中范围重叠的目标span
  const targetSpans = Array.from(document.querySelectorAll('span.editor-bold')).filter(span => {
    return range.intersectsNode(span) || range.containsNode(span, true);
  });

  // 逐个解包裹span
  targetSpans.forEach(span => {
    const parent = span.parentNode;
    // 将span的子节点移到父节点，替换span本身
    while (span.firstChild) {
      parent.insertBefore(span.firstChild, span);
    }
    parent.removeChild(span);
  });

  // 重新设置选中范围，避免DOM变更后选中失效
  selection.removeAllRanges();
  selection.addRange(range);

  // 执行包裹操作
  surroundSelection(el);
}

关键细节说明 #

• 类名识别：给自定义的加粗span添加类名是关键，这样能精准区分业务逻辑生成的span和页面其他span，防止误删除。
• Range方法：intersectsNode用于判断节点与选中范围是否有重叠，containsNode则判断节点是否完全包含在选中范围内，两者结合覆盖所有重叠场景。
• 解包裹逻辑：通过循环将span的子节点逐个移到父节点，再删除span，确保文本内容完整保留，仅移除多余的容器标签。

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