我有一个包含格式正确且有效的 XML的变量字符串。我需要使用 JavaScript 代码来解析这个提要。
如何使用(与浏览器兼容的)JavaScript 代码完成此操作?
我有一个包含格式正确且有效的 XML的变量字符串。我需要使用 JavaScript 代码来解析这个提要。
如何使用(与浏览器兼容的)JavaScript 代码完成此操作?
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");
}
一旦你有一个Document
通过获得的parseXml
,你可以使用通常的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);
更新:有关更正确的答案,请参阅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 会出现,并且这会测试一切是否按预期解析。
网络上的大多数示例(以及上面介绍的一些示例)展示了如何以浏览器兼容的方式从文件加载 XML 。这证明很容易,除了不支持该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;
}
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") + "'"
);
}
我一直使用下面的方法在 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);
}
}
}
}