用JavaScriptparsing一个variablesstring
我有一个variablesstring ,其中包含格式正确和有效的XML。 我需要使用JavaScript代码来parsing这个提要。
我怎样才能使用(浏览器兼容)的JavaScript代码来实现这一点?
更新:为了更正确的答案,请参阅Tim Down的答案 。
Internet Explorer和基于Mozilla的浏览器公开不同的XMLparsing对象,所以使用jQuery等JavaScript框架来处理跨浏览器的差异是明智的。
一个非常基本的例子是:
var xml = "<music><album>Beethoven</album></music>"; var result = $(xml).find("album").text();
注:正如评论中指出的那样; jQuery实际上并没有进行任何XMLparsing,它依赖于DOM的innerHTML方法,并将像parsing任何HTML一样parsing它,因此在XML中使用HTML元素名称时要小心。 但是我认为它对于简单的XML“parsing”非常有效,但是对于密集或“dynamic”XMLparsing来说,可能并不build议这样做,因为在这种parsing中,不会预测XML会下降,而且会testing是否所有事情都按预期parsing。
以下内容将在所有主stream浏览器(包括Internet Explorer 6)中将XMLstringparsing为XML文档。一旦拥有了,就可以使用常用的DOM遍历方法/属性(如childNodes
和getElementsByTagName()
来获取所需的节点。
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"); }
用法示例:
var xml = parseXml("<foo>Stuff</foo>"); alert(xml.documentElement.nodeName);
如果您使用的是jQuery,则可以使用其内置的parseXML()
方法。
var xml = $.parseXML("<foo>Stuff</foo>"); alert(xml.documentElement.nodeName);
Web上的大多数示例(以及上面介绍的一些示例)都展示了如何以浏览器兼容的方式从文件加载XML。 这很容易,除非Google Chrome不支持document.implementation.createDocument()
方法。 使用Chrome时,为了将XML文件加载到XmlDocument对象中,需要使用内置的XmlHttp对象,然后通过传递URI来加载文件。
在你的情况下,情况是不同的,因为你想从一个stringvariables ,而不是一个URL加载XML。 然而,对于这个需求,Chrome应该和Mozilla一样工作(或者我听说过)并且支持parseFromString()方法。
这是我使用的一个函数(它是我目前构build的浏览器兼容性库的一部分):
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 XMLparsing器。 它是面向对象的,它有很多的例子,再加上API的logging。 这是相当新的,但它迄今为止我的项目之一,很好地工作。 我喜欢的一件事是它会直接从string或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); } } } }
显然,jQuery现在提供了jQuery.parseXML http://api.jquery.com/jQuery.parseXML/从版本1.5开始;
请看看XML DOM Parser ( W3Schools )。 这是关于XML DOMparsing的教程。 实际的DOMparsing器从浏览器到浏览器不同,但是DOM API是标准化的并且保持不变(或多或less)。
如果您可以限制自己的Firefox,也可以使用E4X 。 使用起来相对简单,它是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.
假设你想从这个XML构build一个DOM,可悲的是你需要使用浏览器特定的接口。 不过,这是一个跨浏览器function的尝试。
W3Schools 还logging了各种浏览器特定的方法。
我创build了一个很容易parsingXML的jQuery插件。 它适用于所有雅虎A级浏览器,并提供过滤,限制和callback选项。
这可能是一个解决scheme来考虑: http : //jparse.kylerush.net/
<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)来操纵xmlstring
例如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')) })