如何在选中内容周围拆分DOM节点（支持自定义标签如<bdi>）

你想要实现类似execCommand()对bold标签的拆分效果——把选中内容从包围的标签中剥离，同时将原标签拆分为前后两个完整的标签节点，但要支持execCommand()不兼容的自定义标签（比如<bdi>），甚至处理嵌套标签的复杂场景。下面用原生JavaScript实现这个功能，分步骤解释并覆盖你的核心需求场景。

核心思路 #

1. 获取当前选区对应的Range对象，这是操作DOM选区的基础
2. 检查选中内容是否完全被目标标签（如<bdi>或<b>）包裹
3. 如果是，则将原标签拆分为三个部分：
   • 前半部分：目标标签 + 选中内容之前的内容
   • 中间部分：选中内容（剥离目标标签）
   • 后半部分：目标标签 + 选中内容之后的内容
4. 如果没有包围的目标标签，可选择将选中内容包裹进目标标签（对应你提到的“未包围时包裹”的需求）

完整原生JS实现 #

function splitOrWrapTagAroundSelection(targetTagName) {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return; // 无选中内容时直接退出

  const range = selection.getRangeAt(0);
  const targetTag = targetTagName.toLowerCase();

  // 辅助函数：查找完全包围选区的目标标签元素
  function getSurroundingWrappingElement() {
    let currentEl = range.commonAncestorContainer;
    // 从选区公共祖先容器向上找到最近的元素节点
    while (currentEl.nodeType !== Node.ELEMENT_NODE) {
      currentEl = currentEl.parentNode;
    }
    // 继续向上查找目标标签，直到文档根节点
    while (currentEl && currentEl.tagName.toLowerCase() !== targetTag) {
      currentEl = currentEl.parentNode;
      if (!currentEl || currentEl === document) return null;
    }
    // 验证整个选区是否完全在该元素内部
    const elementRange = document.createRange();
    elementRange.selectNodeContents(currentEl);
    const isFullyContained = elementRange.containsNode(range.startContainer, true) &&
                              elementRange.containsNode(range.endContainer, true);
    return isFullyContained ? currentEl : null;
  }

  const surroundingEl = getSurroundingWrappingElement();

  if (surroundingEl) {
    // 1. 拆分选中内容之前的部分，包裹进新目标标签
    const preRange = document.createRange();
    preRange.selectNodeContents(surroundingEl);
    preRange.setEnd(range.startContainer, range.startOffset);
    const preContent = preRange.extractContents();
    const preWrapper = document.createElement(targetTag);
    preWrapper.appendChild(preContent);
    surroundingEl.parentNode.insertBefore(preWrapper, surroundingEl);
    // 移除空标签，避免无效DOM
    if (preWrapper.childNodes.length === 0) preWrapper.remove();

    // 2. 拆分选中内容之后的部分，包裹进新目标标签
    const postRange = document.createRange();
    postRange.selectNodeContents(surroundingEl);
    postRange.setStart(range.endContainer, range.endOffset);
    const postContent = postRange.extractContents();
    const postWrapper = document.createElement(targetTag);
    postWrapper.appendChild(postContent);
    surroundingEl.parentNode.insertBefore(postWrapper, surroundingEl.nextSibling);
    // 移除空标签
    if (postWrapper.childNodes.length === 0) postWrapper.remove();

    // 3. 将原包围标签替换为选中内容（剥离目标标签）
    while (surroundingEl.firstChild) {
      surroundingEl.parentNode.insertBefore(surroundingEl.firstChild, surroundingEl);
    }
    surroundingEl.remove();

    // 4. 恢复选区，保持操作连贯性
    selection.removeAllRanges();
    selection.addRange(range);
  } else {
    // 无包围标签时，包裹选中内容（可选功能）
    try {
      const wrapper = document.createElement(targetTag);
      range.surroundContents(wrapper);
    } catch (e) {
      console.error("无法包裹选中内容：", e);
    }
  }
}

测试你的需求场景 #

场景1：拆分<bdi>标签 #

初始DOM：

<bdi>ABCDEFGHI</bdi>

选中DEF后调用：

splitOrWrapTagAroundSelection('bdi');

最终DOM将变为：

<bdi>ABC</bdi>DEF<bdi>GHI</bdi>

场景2：处理嵌套标签（如<b>+<i>） #

初始DOM：

<b>This text is <i>marked as bold with</i> some italic text too.</b>

选中bold后调用：

splitOrWrapTagAroundSelection('b');

最终DOM将变为：

<b>This text is <i>marked as</i></b>
<i>bold</i>
<b><i>with</i> some italic text too.</b>

完全保留了原有的嵌套结构，同时实现了外层标签的拆分。

额外说明 #

• 自动处理空标签：选中内容为标签开头/结尾时，不会生成无效的空目标标签
• 兼容文本节点和嵌套元素：不会破坏原有DOM的层级结构
• 恢复选区：操作完成后保持原选中状态，提升用户体验

备注：内容来源于stack exchange，提问作者user1636349