使用 Javascript 将 XML 转换为 JSON(并返回)

Posted

技术标签:

【中文标题】使用 Javascript 将 XML 转换为 JSON(并返回)【英文标题】:Convert XML to JSON (and back) using Javascript 【发布时间】:2022-01-05 19:36:30 【问题描述】:

如何将 XML 转换为 JSON,然后再转换回 XML?

以下工具运行良好,但并不完全一致:

xml2json

有没有人遇到过这种情况?

【问题讨论】:

请解释不一致的地方 具体来说,必须将只有 1 个元素的 JSON 数组转换为 XML。当您将其转换回 JSON,而不是 1 元素数组时,它创建了对象字面量。我通过使用 $.isArray() 检查类型来解决它,如果 !$.isArray() 将其包装在一个数组中。 xml2json - fyneworks.com/jquery/xml-to-json - 截至 2013 年 2 月 15 日 14:25 AEST 打破抛出 500 次 json2xml 链接已损坏。 @ysrb 插件示例在 IE8 中不起作用! 【参考方案1】:

我认为这是最好的:Converting between XML and JSON

请务必阅读accompanying article on the xml.com O'Reilly site,其中详细介绍了这些转换存在的问题,我认为您会从中受益匪浅。 O'Reilly 主持这篇文章的事实应该表明 Stefan 的解决方案是有价值的。

【讨论】:

感谢您的回复!就我而言,JSON 是规范表示,而 XML 仅用于 XSLT .. 使用它不是我的想法! :) 这仅在浏览器中。不适用于 node.js 或非浏览器环境。还有其他想法吗? 关于@JasonDenizac 对他的帖子的评论,我不确定这个链接如何帮助解决拥有一个对象而不是一个项目数组的问题...... 我发现如果你从 json-xml-json 开始,这个库效果很好,但是如果你想要 xml-json-xml 存在可逆性问题,因为它添加了元数据 xml 元素,如 请注意,这是一个 Copyleft 许可的解决方案。只有在编写开源软件时才可以选择。【参考方案2】:

https://github.com/abdmob/x2js - 我自己的库(更新自 http://code.google.com/p/x2js/ 的 URL):

此库提供 XML 到 JSON(javascript 对象)和反之亦然的 javascript 转换功能。该库非常小,不需要任何其他额外的库。

API 函数

new X2JS() - 创建您的实例以访问所有库功能。您也可以在此处指定可选配置选项 X2JS.xml2json - 将指定为 DOM 对象的 XML 转换为 JSON X2JS.json2xml - 将 JSON 转换为 XML DOM 对象 X2JS.xml_str2json - 将指定为字符串的 XML 转换为 JSON X2JS.json2xml_str - 将 JSON 转换为 XML 字符串

http://jsfiddle.net/abdmob/gkxucxrj/1/上的在线演示

var x2js = new X2JS();
function convertXml2JSon() 
    $("#jsonArea").val(JSON.stringify(x2js.xml_str2json($("#xmlArea").val())));


function convertJSon2XML() 
    $("#xmlArea").val(x2js.json2xml_str($.parseJSON($("#jsonArea").val())));


convertXml2JSon();
convertJSon2XML();
$("#convertToJsonBtn").click(convertXml2JSon);
$("#convertToXmlBtn").click(convertJSon2XML);

【讨论】:

嗨,你是如何克服这样一个问题的:如果你在一个对象中有一个对象,它就在一个对象中,如果有 n > 1 个对象,你有一个数组。这使得很难在模板中使用 xml 到 json 对象... 是的,您应该使用一些技巧,这取决于您对 XML 结构的了解(因为这里没有 XSD)。使用 ..._asArray 语法始终以数组(序列)的形式访问您的节点 Sample:// XML 字符串到 JSON var xmlText = "Successddsfgdsdgfdgfd"; var jsonObj = X2JS.xml_str2json(xmlText);警报(jsonObj.MyOperation.test);警报 (jsonObj.MyOperation.test_asArray[0]); 我的主要问题是,当我将 json 转换回 xml 时,json 充满了额外的属性,并且当字符串 xml 版本保留了所有无用的东西时。它有各种逗号和空格... 你能把你的样品提交给code.google.com/p/x2js/issues我去查一下【参考方案3】:

不久前,我为我的 TV Watchlist 应用程序编写了这个工具 https://bitbucket.org/surenrao/xml2json,希望这也能有所帮助。

Synopsys:一个库,不仅可以将 xml 转换为 json,而且还易于调试(没有循环错误)并将 json 重新创建回 xml。特点:- 将 xml 解析为 json 对象。将 json 对象打印回 xml。可用于将 IndexedDB 中的 xml 保存为 X2J 对象。打印 json 对象。

【讨论】:

@kleopatra 此链接指向将 xml 转换为 json 的工具。它不是参考,而是资源的实际链接。不知道我应该怎么做:)【参考方案4】:

这些答案对我实现这个功能有很大帮助:

function xml2json(xml) 
  try 
    var obj = ;
    if (xml.children.length > 0) 
      for (var i = 0; i < xml.children.length; i++) 
        var item = xml.children.item(i);
        var nodeName = item.nodeName;

        if (typeof (obj[nodeName]) == "undefined") 
          obj[nodeName] = xml2json(item);
         else 
          if (typeof (obj[nodeName].push) == "undefined") 
            var old = obj[nodeName];

            obj[nodeName] = [];
            obj[nodeName].push(old);
          
          obj[nodeName].push(xml2json(item));
        
      
     else 
      obj = xml.textContent;
    
    return obj;
   catch (e) 
      console.log(e.message);
  

只要你传入一个 jquery dom/xml 对象:对我来说就是:

Jquery(this).find('content').eq(0)[0]

content 是我存储 xml 的字段。

【讨论】:

【参考方案5】:

使用服务器端作为客户端的最佳方式并不适用于所有场景。我试图使用 javascript 构建在线 json 到 xml 和 xml 到 json 转换器,我觉​​得几乎不可能,因为它不能在所有场景中工作。最终,我在 ASP.MVC 中使用 Newtonsoft 完成了服务器端。这里是在线转换器http://techfunda.com/Tools/XmlToJson

【讨论】:

【参考方案6】:

我个人会推荐this tool。它是一个 XML 到 JSON 的转换器。

它非常轻量级,并且是纯 JavaScript。它不需要依赖。您可以简单地将函数添加到您的代码中,并根据需要使用它。

它还考虑了 XML 属性。

var xml = ‘<person id=”1234” age=”30”><name>John Doe</name></person>’;
var json = xml2json(xml); 

console.log(json); 
// prints ‘“person”: “id”: “1234”, “age”: “30”, “name”: “John Doe”’

这是online demo!

【讨论】:

未找到github repo【参考方案7】:

免责声明:我写过fast-xml-parser

Fast XML Parser 可以帮助将 XML 转换为 JSON,反之亦然。这是一个例子;

var options = 
    attributeNamePrefix : "@_",
    attrNodeName: "attr", //default is 'false'
    textNodeName : "#text",
    ignoreAttributes : true,
    ignoreNameSpace : false,
    allowBooleanAttributes : false,
    parseNodeValue : true,
    parseAttributeValue : false,
    trimValues: true,
    decodehtmlchar: false,
    cdataTagName: "__cdata", //default is 'false'
    cdataPositionChar: "\\c",
;
if(parser.validate(xmlData)=== true)//optional
    var jsonObj = parser.parse(xmlData,options);

如果你想将 JSON 或 JS 对象解析成 XML 则

//default options need not to set
var defaultOptions = 
    attributeNamePrefix : "@_",
    attrNodeName: "@", //default is false
    textNodeName : "#text",
    ignoreAttributes : true,
    encodeHTMLchar: false,
    cdataTagName: "__cdata", //default is false
    cdataPositionChar: "\\c",
    format: false, 
    indentBy: "  ",
    supressEmptyNode: false
;
var parser = new parser.j2xParser(defaultOptions);
var xml = parser.parse(json_or_js_obj);

【讨论】:

:D FXP 不仅仅是 XML 2 JSON 转换器。请检查它的自述文件。【参考方案8】:

Here' 一个来自有文档且非常著名的 npm 库的好工具,它很好地完成了 xml js 转换:与上面提出的一些(可能全部)解决方案不同,它也转换 xml cmets。

var obj = name: "Super", Surname: "Man", age: 23;

var builder = new xml2js.Builder();
var xml = builder.buildObject(obj);

【讨论】:

【参考方案9】:

我使用 xmlToJson 只是为了获取 xml 的单个值。 我发现执行以下操作要容易得多(如果 xml 只出现一次..)

let xml =
'<person>' +
  ' <id>762384324</id>' +
  ' <firstname>Hank</firstname> ' +
  ' <lastname>Stone</lastname>' +
'</person>';

let getXmlValue = function(str, key) 
  return str.substring(
    str.lastIndexOf('<' + key + '>') + ('<' + key + '>').length,
    str.lastIndexOf('</' + key + '>')
  );



alert(getXmlValue(xml, 'firstname')); // gives back Hank

【讨论】:

【参考方案10】:

在 6 条简单的 ES6 行中:

xml2json = xml =>                                                                                                                                                      
  var el = xml.nodeType === 9 ? xml.documentElement : xml                                                                                                               
  var h  = name: el.nodeName                                                                                                                                          
  h.content    = Array.from(el.childNodes || []).filter(e => e.nodeType === 3).map(e => e.textContent).join('').trim()                                                  
  h.attributes = Array.from(el.attributes || []).filter(a => a).reduce((h, a) =>  h[a.name] = a.value; return h , )                                                 
  h.children   = Array.from(el.childNodes || []).filter(e => e.nodeType === 1).map(c => h[c.nodeName] = xml2json(c))                                                    
  return h                                                                                                                                                              
  

使用echo "xml2json_example()" | node -r xml2json.es6 进行测试,源地址为https://github.com/brauliobo/biochemical-db/blob/master/lib/xml2json.es6

【讨论】:

6 行简单,加上来自xml2json 的 2000 行 @ShortFuse 唯一的依赖是 xmldom,一个 xml 解析器。这不使用来自 npm 的 xml2json,尽管名称相同【参考方案11】:

我创建了一个基于正则表达式的递归函数,以防您不想安装库并了解发生的事情背后的逻辑:

const xmlSample = '<tag>tag content</tag><tag2>another content</tag2><tag3><insideTag>inside content</insideTag><emptyTag /></tag3>';
console.log(parseXmlToJson(xmlSample));

function parseXmlToJson(xml) 
    const json = ;
    for (const res of xml.matchAll(/(?:<(\w*)(?:\s[^>]*)*>)((?:(?!<\1).)*)(?:<\/\1>)|<(\w*)(?:\s*)*\/>/gm)) 
        const key = res[1] || res[3];
        const value = res[2] && parseXmlToJson(res[2]);
        json[key] = ((value && Object.keys(value).length) ? value : res[2]) || null;

    
    return json;

每个循环的正则表达式解释:

res[0] - 返回 xml(原样) res[1] - 返回 xml 标签名称 res[2] - 返回 xml 内容 res[3] - 返回 xml 标签名称,以防标签自行关闭。例如:&lt;tag /&gt;

您可以在此处查看正则表达式的工作原理: https://regex101.com/r/ZJpCAL/1

注意:如果 json 有一个未定义值的键,它将被删除。 这就是我在第 9 行末尾插入 null 的原因。

【讨论】:

这太棒了。像魅力一样工作!【参考方案12】:

您也可以使用txml。它可以解析成由简单对象组成的 DOM 并进行字符串化。结果,内容将被修剪。因此,带有空格的原始格式将丢失。但这可以很好地用于缩小 HTML。

const xml = require('txml');
const data = `
<tag>tag content</tag>
<tag2>another content</tag2>
<tag3>
  <insideTag>inside content</insideTag>
  <emptyTag />
</tag3>`;

const dom = xml(data); // the dom can be JSON.stringified

xml.stringify(dom); // this will return the dom into an xml-string

免责声明:我是 txml 的作者,这是 javascript 中最快的 xml 解析器。

【讨论】:

? 这是fast-xml-parser 的一个很好的替代品,使用simplify,它不会任意将字符串转换为数字(如"1.0"11.

以上是关于使用 Javascript 将 XML 转换为 JSON(并返回)的主要内容,如果未能解决你的问题,请参考以下文章

使用 Javascript 将 XML 转换为 JSON(并返回)

即时将 XML 转换为 HTML,并添加 JavaScript 事件?

使用 JavaScript 将 XML 转成 JSON

怎样将JAVA中得list集合转换为javascript的二维数组?

XSLT学习通过JavaScript转化xml

在javascript中将表单数据保存为xml时防止跨站点(XSS)