XML 到 JSON 转换中正确处理元素属性的完整指南

老晨君_4545

老晨君_4545

2026-05-01

361人浏览

原创

XML 到 JSON 转换中正确处理元素属性的完整指南

本文详解如何在 JavaScript 中实现健壮的 XML→JSON 转换,重点解决属性(如 id)被错误挂载到父节点而非所属元素的问题,并提供可直接运行的优化代码与关键设计原则。

本文详解如何在 javascript 中实现健壮的 xml→json 转换,重点解决属性(如 `id`)被错误挂载到父节点而非所属元素的问题,并提供可直接运行的优化代码与关键设计原则。

在将 XML 结构转换为 JSON 时,一个常见却极易被忽视的陷阱是:XML 元素的属性未被正确归属到其对应节点对象中,反而“泄漏”至父级或顶层对象。原始实现中, 的 id 属性被错误地添加到了 smf 根对象下,导致 topic 数组项中缺失 id 字段——这不仅违背 XML 语义,更使后续数据消费(如前端渲染、API 消费)失效。

根本原因在于原始逻辑中属性收集与子节点递归处理的顺序和作用域错位:它在遍历子元素时才检查并设置当前子项的属性,但此时已脱离该子项自身上下文;更严重的是,当多个同名元素(如多个 )存在时,属性被提前写入父对象,覆盖了后续同名节点的属性归属。

✅ 正确方案的核心原则是:每个节点的属性必须在该节点自身的转换作用域内完成初始化,并优先于子节点处理。以下是经过验证的优化实现:

function xml2js(node) {
  try {
    // ✅ 第一步:为当前节点创建空对象,并立即注入全部属性(若存在)
    const obj = [...(node.attributes || [])].reduce((acc, attr) => {
      acc[attr.nodeName] = attr.value;
      return acc;
    }, {});

    // ✅ 第二步:判断是否为纯文本节点(无子元素)
    if (node.children.length === 0) {
      // 保留原始文本内容(含 CDATA),避免丢失 HTML 片段等富内容
      obj.content = node.textContent.trim();
    } else {
      // ✅ 第三步:遍历子元素,递归构建结构
      for (const child of node.children) {
        const { nodeName } = child;
        const existing = obj[nodeName];

        if (existing === undefined) {
          // 首次出现:直接赋值为递归结果
          obj[nodeName] = xml2js(child);
        } else {
          // 已存在:转为数组并追加(支持重复标签,如多个 <topic>)
          if (!Array.isArray(existing)) {
            obj[nodeName] = [existing];
          }
          obj[nodeName].push(xml2js(child));
        }
      }
    }

    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><a href="...">Test</a></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 而非整个文档
console.log(JSON.stringify({ smf: result }, null, 2));</topic>

? 关键改进点说明:

JS X Monitor
JS X Monitor

X.com (Twitter) 账号监控自动化:定时抓取指定账号最新推文,发现新内容即时推送通知。

下载
  • 属性前置注入:[...node.attributes] 确保每个节点对象在处理任何子节点前,已完整承载自身所有属性(如 id, ts),彻底避免跨层级污染。
  • textContent 安全使用:对无子元素节点,统一用 textContent 提取内容(自动合并文本节点与 CDATA),并 .trim() 清理空白,兼顾语义与实用性。
  • 数组化逻辑健壮性:通过 Array.isArray() 显式判断 + 动态转数组,精准处理重复标签(如多 ),无需预判结构。
  • 调用入口修正:务必传入 XMLDoc.documentElement(即 节点),而非整个 XMLDoc 对象,否则会额外包含 声明等非预期节点。

⚠️ 注意事项:

  • 本方案不自动展开 #text 或注释节点,聚焦于标准元素与属性,符合大多数业务场景需求;如需保留注释,需额外检查 node.nodeType === Node.COMMENT_NODE。
  • 若 XML 含命名空间(xmlns),需扩展属性过滤逻辑(如跳过 xmlns*),避免污染 JSON 结构。
  • 对超大 XML,建议增加递归深度限制或改用流式解析(如 sax-js),防止栈溢出。

通过以上重构, 将准确生成 { "id": "78603", "icon": "...", ... } 对象,嵌套于 topic 数组中,完全匹配预期 JSON Schema。这不仅是语法修复,更是对 XML 层次语义的尊重——每个属性,都应忠实地属于它的主人。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

js json

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

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

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

2023.08.07

2175

5

json是什么
json是什么

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

2023.08.23

3422

1

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

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

2023.10.13

1156

3

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

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

2025.09.10

3919

7

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

4516

8

正则表达式不包含
正则表达式不包含

正则表达式,又称规则表达式,,是一种文本模式,包括普通字符和特殊字符,是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式的文本。php中文网给大家带来了有关正则表达式的相关教程以及文章,希望对大家能有所帮助。

2023.07.05

3041

4

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

2023.07.05

8402

9

java正则表达式匹配字符串
java正则表达式匹配字符串

在Java中,我们可以使用正则表达式来匹配字符串。本专题为大家带来java正则表达式匹配字符串的相关内容,帮助大家解决问题。

2023.08.11

812

5

正则表达式空格
正则表达式空格

正则表达式空格可以用“\s”来表示,它是一个特殊的元字符,用于匹配任意空白字符,包括空格、制表符、换行符等。本专题为大家提供正则表达式相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

520

5

热门下载

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

精品课程

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

共101课时 | 21.1万人学习

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

共39课时 | 4.9万人学习