如何使用JavaScript展开HTML中的嵌套标签

问题核心 #

你需要把嵌套的<tag>结构拆成多个独立的闭合标签，但原正则只能匹配固定结构的单次嵌套，没法处理多层嵌套，也不能彻底清理所有嵌套情况。

方案一：循环正则替换（快速实现） #

正则本身不支持递归匹配，但可以通过循环执行替换直到没有嵌套为止，能覆盖多层嵌套场景：

function Unnest() {
  const nestedEl = document.getElementById("Nested");
  let html = nestedEl.innerHTML;
  // 匹配外层<tag>包含文本+完整子<tag>+剩余文本的结构
  const regex = /<tag>([^<]*(?:(?!<\/?tag>)[<])*?)<tag>(.*?)<\/tag>([^<]*(?:(?!<\/?tag>)[<])*?)<\/tag>/g;
  let newHtml;
  // 循环替换直到无匹配项
  do {
    newHtml = html.replace(regex, '<tag>$1</tag><tag>$2</tag><tag>$3</tag>');
    if (newHtml === html) break;
    html = newHtml;
  } while (true);
  nestedEl.innerHTML = html;
}

细节说明 #

• 正则里的[^<]*(?:(?!<\/?tag>)[<])*?用来匹配不包含<tag>或</tag>的内容，避免误匹配其他标签
• 循环执行替换，确保所有嵌套层级都被拆解

方案二：DOM解析法（更可靠） #

处理HTML结构优先用DOM API，完全规避正则的局限性，适合复杂内容场景：

function Unnest() {
  const nestedEl = document.getElementById("Nested");
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = nestedEl.innerHTML;

  // 递归处理单个<tag>元素，拆解嵌套
  function processTag(tagEl) {
    const resultTags = [];
    let currentText = '';

    // 遍历当前tag的所有子节点
    for (const node of tagEl.childNodes) {
      if (node.nodeType === Node.TEXT_NODE) {
        // 收集文本内容（去除多余空格）
        currentText += node.textContent.trim();
      } else if (node.tagName === 'TAG') {
        // 遇到子tag，先把当前文本转成独立tag（如果有内容）
        if (currentText) {
          const newTag = document.createElement('tag');
          newTag.textContent = currentText;
          resultTags.push(newTag);
          currentText = '';
        }
        // 递归处理子tag，把结果合并进来
        resultTags.push(...processTag(node));
      }
    }

    // 处理最后剩余的文本
    if (currentText) {
      const newTag = document.createElement('tag');
      newTag.textContent = currentText;
      resultTags.push(newTag);
    }

    return resultTags;
  }

  // 处理所有顶层<tag>
  const topTags = tempContainer.querySelectorAll('tag');
  const finalTags = [];
  topTags.forEach(tag => {
    finalTags.push(...processTag(tag));
    tag.remove();
  });

  // 把结果放回原容器
  nestedEl.innerHTML = '';
  finalTags.forEach(tag => nestedEl.appendChild(tag));
}

优势 #

• 准确识别文本节点和标签节点，不会出现正则匹配错误
• 递归处理所有嵌套层级，无论多深都能彻底拆解

测试结果 #

输入：

<tag>sometext<tag>sometext</tag>sometext</tag>

两种方案都能输出：

<tag>sometext</tag><tag>sometext</tag><tag>sometext</tag>

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