JavaScript中变量字符串的XML解析

我有一个变量的字符串，它包含格式良好且有效的XML。我需要使用JavaScript代码来解析这个提要。

我如何使用(浏览器兼容的)JavaScript代码来实现这一点?

257317 次浏览
小开

请看一下XML DOM解析器 (W3Schools)。这是一个关于XML DOM解析的教程。实际的DOM解析器因浏览器而异，但DOM API是标准化的，并保持相同(或多或少)。

或者使用E4X，如果你可以自己限制到Firefox。它相对来说更容易使用，并且从1.6版开始成为JavaScript的一部分。这里是一个小的使用示例…

//Using E4X
var xmlDoc=new XML();
xmlDoc.load("note.xml");
document.write(xmlDoc.body); //Note: 'body' is actually a tag in note.xml,
//but it can be accessed as if it were a regular property of xmlDoc.
小开
最佳答案

更新:更正确的答案见Tim Down的答案。

例如，Internet Explorer和基于mozilla的浏览器为XML解析公开了不同的对象，因此使用jQuery这样的JavaScript框架来处理跨浏览器的差异是明智的。

一个非常基本的例子是:

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


var result = $(xml).find("album").text();

注:如评论所指出;jQuery实际上不做任何XML解析，它依赖于DOM innerHTML方法，并将像解析任何HTML一样解析它，所以在XML中使用HTML元素名称时要小心。但我认为它对于简单的XML“解析”相当有效，但对于密集的或“动态的”XML解析可能不建议使用它，因为在这种情况下，您不知道将会出现哪些XML，并测试是否所有内容都按预期解析。

小开

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

在你的情况下，场景是不同的，因为你想加载XML 从一个字符串变量，而不是一个URL。然而，对于这个要求，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;
}
小开

在IE和Firefox中，我一直使用下面的方法。

示例XML:

<fruits>
<fruit name="Apple" colour="Green" />
<fruit name="Banana" colour="Yellow" />
</fruits>

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);
}
}
}
}
小开

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

< p > jQuery.parseXML( data ) 返回:XMLDocument < / p >
小开

2017年最新答案

下面将在所有主要浏览器中将XML字符串解析为XML文档。除非你需要支持IE <= 8或一些晦涩的浏览器，你可以使用下面的函数:

function parseXml(xmlStr) {
return new window.DOMParser().parseFromString(xmlStr, "text/xml");
}

如果你需要支持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");
}

一旦你通过parseXml获得了一个Document，你就可以使用常见的DOM遍历方法/属性，比如childNodes和getElementsByTagName()来获得你想要的节点。

使用示例:

var xml = parseXml("<foo>Stuff</foo>");
alert(xml.documentElement.nodeName);

如果你使用的是jQuery，从1.5版开始你可以使用它内置的parseXML()方法，这个方法在功能上与上面的函数相同。

var xml = $.parseXML("<foo>Stuff</foo>");
alert(xml.documentElement.nodeName);
小开

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") + "'"
);
}
小开 
<script language="JavaScript">
function importXML()
{
if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = createTable;
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.onreadystatechange = function () {
if (xmlDoc.readyState == 4) createTable()
};
}
else
{
alert('Your browser can\'t handle this script');
return;
}
xmlDoc.load("emperors.xml");
}


function createTable()
{
var theData="";
var x = xmlDoc.getElementsByTagName('emperor');
var newEl = document.createElement('TABLE');
newEl.setAttribute('cellPadding',3);
newEl.setAttribute('cellSpacing',0);
newEl.setAttribute('border',1);
var tmp = document.createElement('TBODY');
newEl.appendChild(tmp);
var row = document.createElement('TR');
for (j=0;j<x[0].childNodes.length;j++)
{
if (x[0].childNodes[j].nodeType != 1) continue;
var container = document.createElement('TH');
theData = document.createTextNode(x[0].childNodes[j].nodeName);
container.appendChild(theData);
row.appendChild(container);
}
tmp.appendChild(row);
for (i=0;i<x.length;i++)
{
var row = document.createElement('TR');
for (j=0;j<x[i].childNodes.length;j++)
{
if (x[i].childNodes[j].nodeType != 1) continue;
var container = document.createElement('TD');
var theData = document.createTextNode(x[i].childNodes[j].firstChild.nodeValue);
container.appendChild(theData);
row.appendChild(container);
}
tmp.appendChild(row);
}
document.getElementById('writeroot').appendChild(newEl);
}
</script>
</HEAD>


<BODY onLoad="javascript:importXML();">
<p id=writeroot> </p>
</BODY>

有关更多信息，请参阅http://www.easycodingclub.com/xml-parser-in-javascript/javascript-tutorials/

小开

你也可以通过jquery的函数($.parseXML)来操作xml字符串

示例javascript:

var xmlString = '<languages><language name="c"></language><language name="php"></language></languages>';
var xmlDoc = $.parseXML(xmlString);
$(xmlDoc).find('name').each(function(){
console.log('name:'+$(this).attr('name'))
})
小开

免责声明:我已经创建了fast-xml-parser

我已经创建了fast-xml-parser来将XML字符串解析为JS/JSON对象或中间遍历对象。它有望在所有浏览器中兼容(但仅在Chrome, Firefox和IE上测试)。

使用

var options = { //default
attrPrefix : "@_",
attrNodeName: false,
textNodeName : "#text",
ignoreNonTextNodeAttr : true,
ignoreTextNodeAttr : true,
ignoreNameSpace : true,
ignoreRootElement : false,
textNodeConversion : true,
textAttrConversion : false,
arrayMode : false
};


if(parser.validate(xmlData)){//optional
var jsonObj = parser.parse(xmlData, options);
}


//Intermediate obj
var tObj = parser.getTraversalObj(xmlData,options);
:
var jsonObj = parser.convertToJson(tObj);

请注意:它不使用DOM解析器，而是使用RE解析字符串并将其转换为JS/JSON对象。

在网上试试, CDN


提交答案