XML 到 JSON 转换中正确处理元素属性的完整教程-js教程-PHP中文网

本文详解如何在 JavaScript 中实现健壮的 XML→JSON 转换，重点解决属性（如 id）被错误挂载到父级而非所属元素的问题，并提供可直接运行的修复方案。

本文详解如何在 javascript 中实现健壮的 xml→json 转换，重点解决属性（如 `id`）被错误挂载到父级而非所属元素的问题，并提供可直接运行的修复方案。

在将 XML 结构转换为 JSON 时，一个常见但极易被忽视的陷阱是：元素属性未被正确归属到其宿主节点，而是意外“上浮”至父级对象中。原始代码中，的 id 属性最终出现在顶层 "smf" 对象下，而非每个 topic 子对象内部——这直接违背了语义一致性与下游消费预期。

根本原因在于原始逻辑中属性收集与子节点递归处理的顺序及作用域错位：它先遍历子元素、再在子元素处理过程中（错误地）将属性写入当前层级的 obj，而此时 obj 实际代表的是父节点的返回值，导致属性“越级”写入。

✅ 正确做法是：每个节点的属性必须仅作用于该节点自身生成的对象。修复后的 xml2js 函数严格遵循这一原则：

优先提取当前节点全部属性，使用现代语法 [...node.attributes || []] 安全展开（兼容无属性情况），并通过 reduce 构建初始对象；
再处理子节点：对每个子元素递归调用 xml2js(item)，并根据同名字段是否存在，自动合并为数组（避免单个元素被覆盖）；
显式区分文本内容与结构内容：当节点无子元素时，将 textContent 统一存入 content 字段（可选，增强可读性；若需纯字符串值，可替换为直接返回 node.textContent）。

以下是生产就绪的修复版实现：

arcgis-js

提供 ArcGIS Maps SDK for JavaScript 开发辅助，涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。

下载

function xml2js(node) {
  try {
    // ✅ 第一步：安全提取当前节点所有属性，构建基础对象
    const obj = [...(node.attributes || [])].reduce((acc, attr) => {
      acc[attr.nodeName] = attr.value;
      return acc;
    }, {});

    // ✅ 第二步：处理子节点（非文本节点）
    if (node.children && node.children.length > 0) {
      for (const item of node.children) {
        const { nodeName } = item;
        const childResult = xml2js(item);

        if (obj[nodeName] === undefined) {
          // 首次出现：直接赋值
          obj[nodeName] = childResult;
        } else {
          // 多次出现：转为数组并追加
          if (!Array.isArray(obj[nodeName])) {
            obj[nodeName] = [obj[nodeName]];
          }
          obj[nodeName].push(childResult);
        }
      }
    } else if (node.textContent?.trim()) {
      // ✅ 第三步：无子元素但有文本内容 → 存入 content 字段（清晰区分结构与值）
      obj.content = node.textContent.trim();
    }

    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>@@##@@]]></icon><subject>Test #14561]]></subject></topic></smf>`;

const XMLDoc = new DOMParser().parseFromString(XMLString, 'text/xml');
const result = xml2js(XMLDoc.documentElement); // 注意：传入 documentElement 而非整个 Document
console.log(JSON.stringify(result, null, 2));

? 关键注意事项：

始终传入 documentElement：DOMParser.parseFromString() 返回的是 Document 对象，其根元素为 documentElement（即），而非 Document 自身 —— 后者包含 doctype、xmlVersion 等元信息，直接传入会导致意外行为。
textContent vs innerHTML：本方案使用 textContent 获取纯文本内容（自动解码 CDATA），若需保留 HTML 标签字符串，请确保源 XML 中已正确转义（如
空元素/纯文本节点处理：当前逻辑对 1694246241 正确生成 "lastTime": {"content": "1694246241"}；若期望扁平化为 "lastTime": "1694246241"，可在无子节点时直接 return node.textContent.trim()，但需权衡与含属性元素（如 ...）的一致性。
性能提示：对超大 XML，建议添加递归深度限制或使用栈模拟迭代，避免潜在栈溢出。

通过以上重构，id、ts 等所有属性均精准绑定至其所属元素对象内，输出结构严格符合预期，具备良好可维护性与扩展性。