Analisi XML di una stringa variabile in JavaScript

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

Come posso farlo 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 oggetti diversi per l'analisi XML, quindi è consigliabile utilizzare un framework JavaScript come jQuery per gestire le differenze tra i browser.

Un esempio davvero di base è:

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

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

Nota: come sottolineato nei commenti; jQuery non esegue in alcun modo l'analisi XML, si basa sul metodo DOM innerHTML e lo analizzerà come qualsiasi HTML, quindi fai attenzione quando usi i nomi degli elementi HTML nel tuo XML. Ma penso che funzioni abbastanza bene per il semplice "analisi" XML, ma probabilmente non è suggerito per l'analisi XML intensa o "dinamica" in cui non si capisce quale XML verrà giù e questo verifica se tutto analizza come previsto.

Risposta aggiornata per il 2017

Di seguito verrà analizzata una stringa XML in un documento XML in tutti i principali browser. A meno che non sia necessario il supporto per IE <= 8 o alcuni browser oscuri, è possibile utilizzare la seguente funzione:

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

Se è necessario 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 Documentottenuto un via parseXml, puoi usare i soliti metodi / proprietà di attraversamento DOM come childNodesegetElementsByTagName() per ottenere i nodi desiderati.

Esempio di utilizzo:

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

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

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

La maggior parte degli esempi sul Web (e alcuni presentati sopra) mostrano come caricare un XML da un file in modo compatibile con il browser. Ciò risulta semplice, tranne nel caso di Google Chrome che non supporta il document.implementation.createDocument()metodo. Quando si utilizza Chrome, per caricare un file XML in un oggetto XmlDocument, è necessario utilizzare l'oggetto XmlHttp incorporato e quindi caricare il file passando l'URI.

Nel tuo caso, lo scenario è diverso, perché desideri caricare l'XML da una variabile stringa , non da un URL. Tuttavia, per questo requisito, Chrome funziona esattamente 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 che sto attualmente creando):

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 XML JavaScript leggero e cross-browser. È orientato agli oggetti e ha molti esempi, inoltre l' API è documentata. È abbastanza nuovo, ma finora ha funzionato bene in uno dei miei progetti. Una cosa che mi piace è che leggerà 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 = '<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") + "'"
    );
}

Ho sempre usato l'approccio di seguito che funziona in Internet Explorer e Firefox.

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

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

jQuery.parseXML( data ) Ritorna: XMLDocument

Dai un'occhiata a XML DOM Parser ( W3Schools ). È un tutorial sull'analisi del DOM XML. Il parser DOM effettivo differisce da browser a browser ma l'API DOM è standardizzata e rimane la stessa (più o meno).

In alternativa, utilizzare E4X se si può limitare a voi stessi di 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.

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

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

Disclaimer : ho creato fast-xml-parser

Ho creato fast-xml-parser per analizzare una stringa XML in oggetto JS / JSON o oggetto di attraversamento intermedio. Si prevede che sia compatibile in 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 utilizza il parser DOM ma analizza la stringa utilizzando RE e la converte in oggetto JS / JSON.

Provalo online , CDN

Puoi anche usare la funzione jquery ($. ParseXML) per manipolare la stringa xml

esempio 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'))
})