js怎么把xml转为json

JavaScript中如何将XML转换为JSON：实用指南与代码示例

在Web开发中,XML（可扩展标记语言）和JSON（JavaScript对象表示法）是两种常见的数据交换格式，虽然JSON因轻量级、易于解析等特性更受前端青睐，但许多系统（如企业级服务、SOAP API）仍以XML格式返回数据，在JavaScript中将XML转换为JSON的方法，是处理跨系统数据交互的重要技能，本文将介绍几种实用的转换方案，包括原生JavaScript实现、第三方库使用，以及注意事项。

为什么需要将XML转换为JSON？

在转换之前,先明确需求场景：

• 前端友好性：JSON可直接被JavaScript解析为对象/数组，无需额外解析步骤，而XML需要DOM操作或专用解析器。
• 数据操作便捷性：JSON的点记法（如data.user.name）和原生方法（如map、filter）比XML的节点遍历更简洁。
• API兼容性：现代RESTful API多使用JSON，若需对接遗留XML接口，转换是必要步骤。

转换方法详解

方法1：使用原生JavaScript（无需依赖）

原生JavaScript可通过DOM解析XML,再递归遍历节点转换为JSON，核心思路是：

1. 解析XML字符串为DOM对象；
2. 遍历DOM节点,处理节点名、属性、文本内容；
3. 递归处理子节点,构建JSON结构。

代码实现

function xmlToJson(xml) {
    // 创建根节点对象
    let obj = {};
    // 处理属性：将节点属性转为 { attrName: attrValue } 格式
    if (xml.nodeType === 1) { // 元素节点
        if (xml.attributes.length > 0) {
            obj["@attributes"] = {};
            for (let j = 0; j < xml.attributes.length; j++) {
                const attribute = xml.attributes.item(j);
                obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
            }
        }
    }
    // 处理子节点
    if (xml.hasChildNodes()) {
        for (let i = 0; i < xml.childNodes.length; i++) {
            const item = xml.childNodes.item(i);
            const nodeName = item.nodeName;
            if (typeof obj[nodeName] === "undefined") {
                // 首次遇到该节点名，直接赋值
                if (item.nodeType === 3 && item.nodeValue.trim() === "") {
                    // 空文本节点，跳过
                    continue;
                }
                obj[nodeName] = xmlToJson(item);
            } else {
                // 已存在同名节点，转为数组
                if (!Array.isArray(obj[nodeName])) {
                    obj[nodeName] = [obj[nodeName]];
                }
                // 避免添加空文本节点
                if (item.nodeType !== 3 || item.nodeValue.trim() !== "") {
                    obj[nodeName].push(xmlToJson(item));
                }
            }
        }
    }
    // 处理文本节点（叶子节点）
    if (xml.nodeType === 3 && xml.nodeValue.trim() !== "") {
        return xml.nodeValue.trim();
    }
    return obj;
}
// 使用示例
const xmlString = `
<root>
    <user id="1">
        <name>张三</name>
        <age>25</age>
        <hobbies>
            <hobby>阅读</hobby>
            <hobby>编程</hobby>
        </hobbies>
    </user>
    <user id="2">
        <name>李四</name>
        <age>30</age>
        <hobbies>
            <hobby>游戏</hobby>
        </hobbies>
    </user>
</root>
`;
// 解析XML字符串为DOM对象
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");
const jsonData = xmlToJson(xmlDoc);
console.log(jsonData);

输出结果

{
    "user": [
        {
            "@attributes": { "id": "1" },
            "name": "张三",
            "age": "25",
            "hobbies": {
                "hobby": ["阅读", "编程"]
            }
        },
        {
            "@attributes": { "id": "2" },
            "name": "李四",
            "age": "30",
            "hobbies": {
                "hobby": ["游戏"]
            }
        }
    ]
}

优缺点

• 优点：无需外部依赖，兼容性好（支持所有现代浏览器）。
• 缺点：代码较复杂，需处理XML的各种节点类型（元素、属性、文本等），对嵌套结构复杂的XML可能存在兼容性问题。

方法2：使用第三方库（推荐：xml2js）

对于复杂XML或追求开发效率,第三方库是更优选择。xml2js是Node.js和浏览器端广泛使用的XML转JSON库，功能强大且易用。

安装（Node.js环境）

npm install xml2js

浏览器端使用

直接通过CDN引入：

<script src="https://cdn.jsdelivr.net/npm/xml2js@0.6.2/lib/xml2js.min.js"></script>

代码实现（Node.js示例）

const { parseString } = require('xml2js');
const xmlString = `
<root>
    <user id="1">
        <name>张三</name>
        <age>25</age>
        <hobbies>
            <hobby>阅读</hobby>
            <hobby>编程</hobby>
        </hobbies>
    </user>
    <user id="2">
        <name>李四</name>
        <age>30</age>
        <hobbies>
            <hobby>游戏</hobby>
        </hobbies>
    </user>
</root>
`;
parseString(xmlString, { explicitArray: false, ignoreAttrs: false }, (err, result) => {
    if (err) {
        console.error('XML解析失败:', err);
        return;
    }
    console.log(result);
});

关键参数说明

• explicitArray: false：当节点只有一个子元素时，不转为数组（默认为true，会强制转为数组）。
• ignoreAttrs: false：是否忽略XML属性（默认为false，属性会存入@attributes字段）。

输出结果

与方法1原生实现结果一致,但代码更简洁，且能处理更复杂的XML结构（如命名空间、CDATA等）。

方法3：使用浏览器内置的XMLSerializer与JSON.stringify

若仅需简单转换（无复杂嵌套和属性），可结合XMLSerializer和手动构建JSON，但这种方法局限性大，仅适用于特定场景。

注意事项

1. XML结构规范

   • 确保XML格式正确（闭合标签、根节点唯一等），否则解析会失败。
   • 处理命名空间（如<ns:root>）时，需在原生方法中额外处理节点名（如ns:root拆分为{ namespace: "ns", name: "root" }）。

2. 数据类型转换

   • XML中的文本内容均为字符串,若需转为数字（如age字段），需手动转换：parseInt(obj.age)。
   • 布尔值（如<active>true</active>）需判断字符串是否为"true"或"false"。

3. 重复节点处理

   • XML中同名的兄弟节点（如多个<hobby>）应转为数组，否则数据会丢失。xml2js的explicitArray参数可控制这一行为。

4. 性能考虑

   • 大型XML文件（如超过1MB）建议使用流式解析（Node.js中的xml-stream库），避免内存溢出。

推荐选择：

• 前端项目或小型XML：优先使用原生方法（避免依赖）。
• Node.js项目或复杂XML：直接使用xml2js（高效且稳定）。

通过合理选择转换方法,可以轻松将XML数据适配为前端所需的JSON格式，提升开发效率和数据交互体验。