本文介绍如何通过递归遍历 dom 树，将任意 html 片段准确拆解为 {text: “…”} 和 {markup: “”} 交替排列的对象数组，避免正则陷阱与节点顺序错乱问题，适用于富文本解析、编辑器内容序列化等场景。
本文介绍如何通过递归遍历 dom 树，将任意 html 片段准确拆解为 `{text: “…”}` 和 `{markup: “
在处理富文本内容（如 WYSIWYG 编辑器导出的 HTML）时，常需将其结构“线性化”为可序列化、可编辑的标记-文本混合数组。例如，将
Helloworld!
拆解为：
[ {"markup": "<p>"}, {"text": "Hello"}, {"markup": "<b>"}, {"text": "world"}, {"markup": "</b>"}, {"text": "!"}, {"markup": "</p>"} ]关键挑战在于：必须严格遵循 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: `</${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 序列化等场景提供坚实基础。