XML to JSON 转换中保留 XML 属性的正确实现方法-js教程-PHP中文网

XML to JSON 转换中保留 XML 属性的正确实现方法

本文详解如何修正 XML→JSON 转换函数，确保元素属性（如 id）正确归属到对应节点对象而非父级或顶层，避免属性错位、丢失，并提供健壮、可读性强的现代 JavaScript 实现。

本文详解如何修正 xml→json 转换函数，确保元素属性（如 `id`）正确归属到对应节点对象而非父级或顶层，避免属性错位、丢失，并提供健壮、可读性强的现代 javascript 实现。

在将 XML 结构转换为 JSON 时，一个常见却易被忽视的问题是：XML 元素的属性（attributes）未被正确挂载到其所属元素对应的 JSON 对象上，而是错误地提升到了父级或顶层对象中。原始代码中，的 id 属性最终出现在 "smf" 对象下（如 "id": "78603"），而非嵌套在每个 topic 子对象内——这直接违背了语义一致性与下游消费预期。

根本原因在于原逻辑中「属性收集时机与作用域」错误：它在处理子元素 item 时，将 item.attributes 写入了当前递归层级的 obj（即父节点对象），而非 item 自身的转换结果中。正确的做法是：每个节点的属性，必须在其自身转换结果中初始化并填充。

以下是修复后的标准实现，采用函数式风格与现代 DOM API：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

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>@@##@@]]></icon><subject></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));</topic>

? 关键改进点说明：

属性作用域精准化：[...node.attributes] 在每一层递归入口处立即提取并合并到当前 obj，确保 id、ts 等属性严格属于其 XML 宿主元素；
空内容安全处理：使用 textContent.trim() 避免空白符污染；content 字段显式区分纯文本与子节点；
同名节点自动数组化：通过 Array.isArray() 检测+动态转换，天然支持多实例场景；
健壮性增强：显式 try/catch + console.error，便于调试；node.children 替代已废弃的 node.childNodes（过滤掉文本/注释节点）；
调用规范提醒：务必传入 XMLDoc.documentElement（即根元素），而非整个 XMLDoc，否则顶层会多出 #document 包裹层。