HTML节点树递归解析成文本标记数组

✅ 正确解法：深度优先递归遍历

核心思想是：对每个节点，先推入其开始标签 → 递归处理所有子节点 → 再推入其结束标签。文本节点则直接提取内容。该方案天然保证开/闭标签包裹其全部子内容，无需手动追踪父子关系或预判后续节点类型。

以下是生产就绪的实现代码：

function parseHtmlToTokenArray(rootNode) {
  const tokens = [];

  function walk(node) {
    // 遍历所有直接子节点（非后代）
    for (const child of node.childNodes) {
      if (child.nodeType === Node.TEXT_NODE) {
        const text = child.textContent.trim();
        if (text.length > 0) { // 忽略纯空白文本节点（如换行缩进）
          tokens.push({ text });
        }
      } else if (child.nodeType === Node.ELEMENT_NODE) {
        // 推入开始标签（小写化确保语义一致）
        tokens.push({ markup: `<${child.tagName.toLowerCase()}>` });

        // 递归处理子树
        if (child.hasChildNodes()) {
          walk(child);
        }

        // 推入结束标签
        tokens.push({ markup: `</${child.tagName.toLowerCase()}>` });
      }
      // 忽略注释、CDATA 等其他节点类型（按需可扩展）
    }
  }

  walk(rootNode);
  return tokens;
}

// 使用示例
const htmlString = `
  <h2 id="mcetoc_1h1m1ll27l">Lorem ipsum dolor sit amet...</h2>
  <p>Lorem ipsum...<a href="#">tr</a><a title="titulo">adsf</a></p>
`;
const tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlString;
const result = parseHtmlToTokenArray(tempDiv);
console.log(result);

⚠️ 注意事项与最佳实践

• 空格与换行处理：textContent 会包含原始 HTML 中的空白符（如

  \n Hello

  会产生 \n Hello）。建议调用 .trim() 过滤纯空白节点，或根据业务需求保留（如代码高亮编辑器需保留缩进）。
• 自闭合标签兼容性：当前逻辑不处理 、
  等自闭合元素。若需支持，可在 ELEMENT_NODE 分支中增加判断：

  const voidElements = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
  if (voidElements.has(child.tagName.toLowerCase())) {
    tokens.push({ markup: `<${child.tagName.toLowerCase()}${child.outerHTML.match(/\/>/) ? '' : '/'}>` });
  }

• 属性安全：outerHTML 可能引入 XSS 风险。本方案仅用 tagName 和手动构造标签，完全规避风险；如需保留属性，应使用 child.getAttributeNames() 安全重建。
• 性能考量：对于超长文档（>10k 节点），递归可能触发栈溢出。此时可改用显式栈的迭代 DFS（附录提供）：

  function walkIterative(root) {
    const stack = [{ node: root, state: 'open' }];
    const tokens = [];
    while (stack.length) {
      const { node, state } = stack.pop();
      if (state === 'open') {
        if (node.nodeType === Node.ELEMENT_NODE) {
          tokens.push({ markup: `<${node.tagName.toLowerCase()}>` });
          stack.push({ node, state: 'close' });
          for (let i = node.childNodes.length - 1; i >= 0; i--) {
            stack.push({ node: node.childNodes[i], state: 'open' });
          }
        } else if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
          tokens.push({ text: node.textContent.trim() });
        }
      } else if (state === 'close' && node.nodeType === Node.ELEMENT_NODE) {
        tokens.push({ markup: `</${node.tagName.toLowerCase()}>` });
      }
    }
    return tokens;
  }

✅ 总结

使用递归深度优先遍历 DOM 是解决“文本/标记分离”问题的最简洁、可靠方案。它以天然的树形结构映射保障标签完整性，彻底规避了扁平化遍历中因节点类型交错导致的闭合标签错位问题。结合空格过滤、自闭合标签适配与安全属性处理，即可构建健壮的 HTML 结构化解析器，为富文本编辑、差异对比、SSR 序列化等场景提供坚实基础。

好了，本文到此结束，带大家了解了《HTML节点树递归解析成文本标记数组》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！