本文介绍如何通过递归遍历 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 序列化等场景提供坚实基础。
