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

本文深入探讨了一种基于深度优先递归遍历DOM树的可靠方法，将任意HTML片段精准拆解为{text: "..."}与{markup: "..."}交替排列的结构化数组，从根本上规避了正则解析的脆弱性和扁平化遍历导致的标签错位问题；该方案天然保持开闭标签与其子内容的严格嵌套关系，同时兼顾空格处理、自闭合标签兼容性、XSS安全及大规模节点下的迭代优化，是富文本编辑器内容序列化、差异比对和SSR渲染等高要求场景的理想技术基础。

本文介绍如何通过递归遍历 DOM 树，将任意 HTML 片段准确拆解为 {text: "..."} 和 {markup: ""} 交替排列的对象数组，避免正则陷阱与节点顺序错乱问题，适用于富文本解析、编辑器内容序列化等场景。

本文介绍如何通过递归遍历 DOM 树，将任意 HTML 片段准确拆解为 `{text: "..."}` 和 `{markup: ""}` 交替排列的对象数组，避免正则陷阱与节点顺序错乱问题，适用于富文本解析、编辑器内容序列化等场景。

在处理富文本内容（如 WYSIWYG 编辑器导出的 HTML）时，常需将其结构“线性化”为可序列化、可编辑的标记-文本混合数组。例如，将

Helloworld!

[
  {"markup": "
"},
  {"text": "Hello"},
  {"markup": ""},
  {"text": "world"},
  {"markup": ""},
  {"text": "!"},
  {"markup": "
"}
]

关键挑战在于：必须严格遵循 DOM 树的嵌套顺序，而非简单按 TreeWalker 或 childNodes 的扁平顺序拼接——否则会丢失层级关系，导致闭合标签提前出现（如你遇到的

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: `` });
      }
      // 忽略注释、CDATA 等其他节点类型（按需可扩展）
    }
  }

  walk(rootNode);
  return tokens;
}

// 使用示例
const htmlString = `
  
Lorem ipsum dolor sit amet...
  
Lorem ipsum...tradsf
`;
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: `` });
      }
    }
    return tokens;
  }

✅ 总结

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

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