Analisi XML di una stringa variabile in JavaScript

Ho una stringa variabile che contiene XML ben formato e valido. Devo usare il codice JavaScript per analizzare questo feed.

Come posso realizzare questo utilizzando il codice JavaScript (compatibile con il browser)?

Aggiornamento: per una risposta più corretta vedi la risposta di Tim Down .

Internet Explorer e, ad esempio, i browser basati su Mozilla espongono diversi oggetti per l’analisi XML, quindi è consigliabile utilizzare un framework JavaScript come jQuery per gestire le differenze tra browser.

Un esempio davvero semplice è:

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

Nota: come indicato nei commenti; jQuery non esegue realmente alcun parsing XML, si affida al metodo innerHTML DOM e lo analizzerà come se fosse un qualsiasi HTML, quindi fai attenzione quando usi i nomi di elementi HTML nel tuo XML. Ma penso che funzioni abbastanza bene per il semplice ‘parsing’ XML, ma probabilmente non è suggerito per l’analisi XML intensiva o ‘dynamic’ in cui non si anticipa quale XML verrà eliminato e questo test se tutto analizza come previsto.

Risposta aggiornata per il 2017

Quanto segue analizzerà una stringa XML in un documento XML in tutti i principali browser. A meno che non sia necessario il supporto per IE <= 8 o un browser oscuro, è possibile utilizzare la seguente funzione:

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

Se hai bisogno di supportare IE <= 8, il seguente farà il lavoro:

 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"); } 

Una volta ottenuto un Document ottenuto tramite parseXml , è ansible utilizzare i consueti metodi / proprietà di attraversamento DOM come getElementsByTagName() e getElementsByTagName() per ottenere i nodes desiderati.

Esempio di utilizzo:

 var xml = parseXml("Stuff"); alert(xml.documentElement.nodeName); 

Se stai usando jQuery, dalla versione 1.5 puoi usare il suo metodo parseXML() , che è funzionalmente identico alla funzione precedente.

 var xml = $.parseXML("Stuff"); alert(xml.documentElement.nodeName); 

La maggior parte degli esempi sul web (e alcuni presentati sopra) mostrano come caricare un XML da un file in un browser compatibile. Questo si rivela facile, tranne nel caso di Google Chrome che non supporta il metodo document.implementation.createDocument() . Quando si utilizza Chrome, per caricare un file XML in un object XmlDocument, è necessario utilizzare l’object XmlHttp incorporato e quindi caricare il file passando l’URI.

Nel tuo caso, lo scenario è diverso, perché vuoi caricare l’XML da una variabile stringa , non un URL. Tuttavia, per questo requisito, Chrome funziona come Mozilla (o almeno così ho sentito) e supporta il metodo parseFromString ().

Ecco una funzione che uso (fa parte della libreria di compatibilità del browser attualmente in costruzione):

 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 è un parser leggero XML JavaScript cross-browser. È orientato agli oggetti e ha un sacco di esempi, più l’ API è documentata. È abbastanza nuovo, ma finora ha funzionato bene in uno dei miei progetti. Una cosa che mi piace è che legge XML direttamente da stringhe o URL e puoi anche usarlo per convertire l’XML in JSON.

Ecco un esempio di cosa puoi fare con Marknote:

 var str = '' + ' ' + ' ' + ''; var parser = new marknote.Parser(); var doc = parser.parse(str); var bookEls = doc.getRootElement().getChildElements(); for (var i=0; i 

Ho sempre usato l’approccio qui sotto che funziona in IE e Firefox.

XML di esempio:

     

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

Apparentemente jQuery ora fornisce jQuery.parseXML http://api.jquery.com/jQuery.parseXML/ dalla versione 1.5

jQuery.parseXML( data ) Restituisce: XMLDocument

Si prega di dare un’occhiata a XML DOM Parser ( W3Schools ). È un tutorial sull’analisi del DOM XML. L’attuale parser DOM differisce da browser a browser ma l’API DOM è standardizzata e rimane la stessa (più o meno).

In alternativa, usa E4X se puoi limitarti a Firefox. È relativamente più facile da usare ed è parte di JavaScript dalla versione 1.6. Ecco un piccolo esempio di utilizzo …

 //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. 
    

Per maggiori informazioni, consultare questo http://www.easycodingclub.com/xml-parser-in-javascript/javascript-tutorials/

Dichiarazione di non responsabilità : ho creato quick-xml-parser

Ho creato fast-xml-parser per analizzare una stringa XML in object JS / JSON o object di attraversamento intermedio. Dovrebbe essere compatibile con tutti i browser (comunque testato solo su Chrome, Firefox e IE).

uso

 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); 

Nota : non usa il parser DOM ma analizza la stringa usando RE e la converte in object JS / JSON.

Provalo online , CDN

È anche ansible utilizzare la funzione jquery ($ .parseXML) per manipolare la stringa xml

esempio javascript:

 var xmlString = ''; var xmlDoc = $.parseXML(xmlString); $(xmlDoc).find('name').each(function(){ console.log('name:'+$(this).attr('name')) })