本文详解如何修正 XML→JSON 转换函数，确保元素属性（如 id）正确归属到对应节点对象而非父级或顶层，避免属性错位、丢失，并提供健壮、可读性强的现代 JavaScript 实现。
本文详解如何修正 xml→json 转换函数，确保元素属性（如 `id`）正确归属到对应节点对象而非父级或顶层，避免属性错位、丢失，并提供健壮、可读性强的现代 javascript 实现。
在将 XML 结构转换为 JSON 时，一个常见却易被忽视的问题是：XML 元素的属性（attributes）未被正确挂载到其所属元素对应的 JSON 对象上，而是错误地提升到了父级或顶层对象中。原始代码中，<topic id="78603"> 的 id 属性最终出现在 "smf" 对象下（如 "id": "78603"），而非嵌套在每个 topic 子对象内——这直接违背了语义一致性与下游消费预期。
根本原因在于原逻辑中「属性收集时机与作用域」错误：它在处理子元素 item 时，将 item.attributes 写入了当前递归层级的 obj（即父节点对象），而非 item 自身的转换结果中。正确的做法是：每个节点的属性，必须在其自身转换结果中初始化并填充。
以下是修复后的标准实现，采用函数式风格与现代 DOM API：
function xml2js(node) {
try {
// ✅ 步骤1：为当前节点创建对象，并立即注入所有属性（关键修正！）
const obj = [...(node.attributes || [])].reduce((acc, attr) => {
acc[attr.nodeName] = attr.value;
return acc;
}, {});
// ✅ 步骤2：若无子元素，仅保留文本内容（注意：不覆盖属性）
if (node.children.length === 0) {
obj.content = node.textContent.trim();
return obj;
}
// ✅ 步骤3：遍历子元素，递归构建结构
for (const child of node.children) {
const { nodeName } = child;
const childResult = xml2js(child);
if (obj[nodeName] === undefined) {
// 首次出现：直接赋值
obj[nodeName] = childResult;
} else {
// 已存在：转为数组并追加（处理同名多节点，如多个 <topic>）
if (!Array.isArray(obj[nodeName])) {
obj[nodeName] = [obj[nodeName]];
}
obj[nodeName].push(childResult);
}
}
return obj;
} catch (e) {
console.error('XML to JSON conversion error:', e);
throw e;
}
}
// 使用示例
const XMLString = `<?xml version="1.0" encoding="UTF-8"?>
<smf>
<lastTime>1694246241</lastTime>
<topic id="78603">
<icon><![CDATA[<div class="board_icon"><img src="..." alt=""></div>]]></icon>
<subject><![CDATA[...]]></subject>
<lastPost>
<time ts="1694246241">Today at 12:57 AM</time>
</lastPost>
</topic>
</smf>`;
const XMLDoc = new DOMParser().parseFromString(XMLString, 'text/xml');
const result = xml2js(XMLDoc.documentElement); // 注意：传入 documentElement 而非整个 Document
console.log(JSON.stringify({ smf: result }, null, 2));? 关键改进点说明：
- 属性作用域精准化：[...node.attributes] 在每一层递归入口处立即提取并合并到当前 obj，确保 id、ts 等属性严格属于其 XML 宿主元素；
- 空内容安全处理：使用 textContent.trim() 避免空白符污染；content 字段显式区分纯文本与子节点；
- 同名节点自动数组化：通过 Array.isArray() 检测+动态转换，天然支持 <topic> 多实例场景；
- 健壮性增强：显式 try/catch + console.error，便于调试；node.children 替代已废弃的 node.childNodes（过滤掉文本/注释节点）；
- 调用规范提醒：务必传入 XMLDoc.documentElement（即 <smf> 根元素），而非整个 XMLDoc，否则顶层会多出 #document 包裹层。
⚠️ 注意事项：
- 该方案默认忽略 XML 注释、处理指令和 CDATA 中的 HTML 标签转义（如
- 若需兼容更复杂 XML（如命名空间、文本混合子节点），建议引入成熟库如 xml2js 或 fast-xml-parser，本实现聚焦轻量、可控、教学友好场景。
通过以上重构，<topic id="78603"> 将准确生成 { "id": "78603", "icon": "...", ... } 结构，完全匹配预期 JSON Schema，为前端数据绑定、API 响应解析等场景奠定可靠基础。
