在JavaScript中对XML变量进行XML解析

Dav*_*ici 200 javascript xml parsing

我有一个包含格式良好且有效的XML 的变量字符串.我需要使用JavaScript代码来解析此Feed.

如何使用(浏览器兼容的)JavaScript代码完成此操作?

Tim*_*own 320

更新了2017年的答案

以下内容将XML字符串解析为所有主流浏览器中的XML文档.除非您需要支持IE <= 8或某些不起眼的浏览器,否则您可以使用以下功能:

function parseXml(xmlStr) {
   return new window.DOMParser().parseFromString(xmlStr, "text/xml");
}
Run Code Online (Sandbox Code Playgroud)

如果您需要支持IE <= 8,以下将完成此任务:

var parseXml;

if (typeof window.DOMParser != "undefined") {
    parseXml = function(xmlStr) {
        return new window.DOMParser().parseFromString(xmlStr, "text/xml");
    };
} else if (typeof window.ActiveXObject != "undefined" &&
       new window.ActiveXObject("Microsoft.XMLDOM")) {
    parseXml = function(xmlStr) {
        var xmlDoc = new window.ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.loadXML(xmlStr);
        return xmlDoc;
    };
} else {
    throw new Error("No XML parser found");
}
Run Code Online (Sandbox Code Playgroud)

一旦你有一个Document通过获得的parseXml,你可以使用通常的DOM遍历方法/属性,如childNodesgetElementsByTagName()得到你想要的节点.

用法示例:

var xml = parseXml("<foo>Stuff</foo>");
alert(xml.documentElement.nodeName);
Run Code Online (Sandbox Code Playgroud)

如果您使用的是jQuery,那么从版本1.5开始,您可以使用其内置parseXML()方法,该方法在功能上与上述功能相同.

var xml = $.parseXML("<foo>Stuff</foo>");
alert(xml.documentElement.nodeName);
Run Code Online (Sandbox Code Playgroud)

  • 我同意,这应该是接受的答案.从早期开始,我的回答是如此古老,我总是觉得好奇它仍然得到了回报.有人赞成删除我接受的答案吗?投票系统是否存在缺陷?向这个人投票! (56认同)
  • @EricTurner:我支持它并且桑德本人已经否定了他的回答.[jQuery docs告诉你不要使用`$()`进行XML解析](http://api.jquery.com/jQuery/#jQuery2).更仔细地阅读评论:它在许多情况下根本不起作用. (2认同)

San*_*uys 90

更新:有关更正确的答案,请参阅Tim Down的回答.

例如,Internet Explorer和基于Mozilla的浏览器为XML解析提供了不同的对象,因此使用像jQuery这样的JavaScript框架来处理跨浏览器的差异是明智的.

一个非常基本的例子是:

var xml = "<music><album>Beethoven</album></music>";

var result = $(xml).find("album").text();
Run Code Online (Sandbox Code Playgroud)

注:正如评论中指出的那样; jQuery并没有真正做任何XML解析,它依赖于DOM innerHTML方法,并且会解析它就像任何HTML一样,因此在XML中使用HTML元素名称时要小心.但我认为它对于简单的XML"解析"非常有用,但是它可能不建议用于密集或"动态"XML解析,在这种情况下,您不需要预先知道XML将会发生什么,并且测试是否所有内容都按预期进行解析.

  • 这个答案是对的.请参阅http://stackoverflow.com/questions/2124924/can-xml-be-parsed-reliably-using-jquerys-responsexml-syntax,http://stackoverflow.com/questions/2908899/jquery-wont-parse-xml -with-nodes-called-option,@ Tim Down的答案和[jQuery文档本身](http://api.jquery.com/jQuery/#jQuery2),其中声明:"注意[`jQuery()`]解析HTML,**而不是**XML" (10认同)
  • 在发布我之前的评论时我没有意识到的是jQuery甚至不解析XML,它只是将它指定为元素的`innerHTML`属性,这根本不可靠. (7认同)
  • 用于抽象IE和其他浏览器之间的XML解析差异的代码是一些简单的行,所以不值得单独使用50K的jQuery.操纵生成的XML的DOM是另一回事. (6认同)
  • @SanderVersluys:既然作者没有接受另一个答案,我会在你的答案中加入一个注释,链接到[@TimDown's](http://stackoverflow.com/a/8412989/35690)正确答案.这样人们就不必阅读所有这些评论来找出正确的答案. (2认同)

Cer*_*rus 19

Web上的大多数示例(以及上面介绍的一些示例)显示了如何以浏览器兼容的方式从文件加载XML .这证明很简单,除了Google Chrome不支持该document.implementation.createDocument()方法的情况.使用Chrome时,为了将XML文件加载到XmlDocument对象中,您需要使用内置的XmlHttp对象,然后通过传递它的URI来加载该文件.

在您的情况下,方案是不同的,因为您要从字符串变量而不是URL 加载XML .然而,对于这个要求,Chrome应该像Mozilla一样工作(或者我听说过)并且支持parseFromString()方法.

这是我使用的一个函数(它是我正在构建的浏览器兼容库的一部分):

function LoadXMLString(xmlString)
{
  // ObjectExists checks if the passed parameter is not null.
  // isString (as the name suggests) checks if the type is a valid string.
  if (ObjectExists(xmlString) && isString(xmlString))
  {
    var xDoc;
    // The GetBrowserType function returns a 2-letter code representing
    // ...the type of browser.
    var bType = GetBrowserType();

    switch(bType)
    {
      case "ie":
        // This actually calls into a function that returns a DOMDocument 
        // on the basis of the MSXML version installed.
        // Simplified here for illustration.
        xDoc = new ActiveXObject("MSXML2.DOMDocument")
        xDoc.async = false;
        xDoc.loadXML(xmlString);
        break;
      default:
        var dp = new DOMParser();
        xDoc = dp.parseFromString(xmlString, "text/xml");
        break;
    }
    return xDoc;
  }
  else
    return null;
}
Run Code Online (Sandbox Code Playgroud)

  • 我知道关于浏览器嗅探的争议性意见,这就是我在这里没有包含该功能的原因.但是,尚未证实它是错误的.无论如何,这是一个*暗示*的例子. (16认同)

小智 13

Marknote是一个很好的轻量级跨浏览器JavaScript XML解析器.它是面向对象的,它有很多例子,而且还记录了API.这是相当新的,但到目前为止,它在我的一个项目中运作良好.我喜欢它的一件事是它将直接从字符串或URL读取XML,您也可以使用它将XML转换为JSON.

以下是Marknote可以做的一个例子:

var str = '<books>' +
          '  <book title="A Tale of Two Cities"/>' +
          '  <book title="1984"/>' +
          '</books>';

var parser = new marknote.Parser();
var doc = parser.parse(str);

var bookEls = doc.getRootElement().getChildElements();

for (var i=0; i<bookEls.length; i++) {
    var bookEl = bookEls[i];
    // alerts "Element name is 'book' and book title is '...'"
    alert("Element name is '" + bookEl.getName() + 
        "' and book title is '" + 
        bookEl.getAttributeValue("title") + "'"
    );
}
Run Code Online (Sandbox Code Playgroud)


Joh*_*ley 8

我总是使用下面的方法在IE和Firefox中运行.

示例XML:

<fruits>
  <fruit name="Apple" colour="Green" />
  <fruit name="Banana" colour="Yellow" />
</fruits>
Run Code Online (Sandbox Code Playgroud)

JavaScript的:

function getFruits(xml) {
  var fruits = xml.getElementsByTagName("fruits")[0];
  if (fruits) {
    var fruitsNodes = fruits.childNodes;
    if (fruitsNodes) {
      for (var i = 0; i < fruitsNodes.length; i++) {
        var name = fruitsNodes[i].getAttribute("name");
        var colour = fruitsNodes[i].getAttribute("colour");
        alert("Fruit " + name + " is coloured " + colour);
      }
    }
  }
}
Run Code Online (Sandbox Code Playgroud)


Jam*_*ate 8

显然jQuery现在提供jQuery.parseXML http://api.jquery.com/jQuery.parseXML/ 从版本1.5开始

jQuery.parseXML( data ) 返回: XMLDocument