Análisis XML de una cadena variable en JavaScript

Tengo una cadena variable que contiene XML bien formado y válido. Necesito usar el código JavaScript para analizar este feed.

¿Cómo puedo lograr esto usando el código JavaScript (compatible con el navegador)?

Actualización: para obtener una respuesta más correcta, consulte la respuesta de Tim Down .

Internet Explorer y, por ejemplo, los navegadores basados ​​en Mozilla exponen diferentes objetos para el análisis XML, por lo que es aconsejable utilizar un marco de JavaScript como jQuery para manejar las diferencias entre navegadores.

Un ejemplo realmente básico es:

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

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

Nota: Como se señaló en los comentarios; jQuery realmente no realiza ningún análisis XML en absoluto, se basa en el método DOM innerHTML y lo analizará como lo haría con cualquier HTML, así que tenga cuidado al usar nombres de elementos HTML en su XML. Pero creo que funciona bastante bien para el 'análisis' XML simple, pero probablemente no se sugiera para el análisis XML intensivo o 'dinámico' en el que no se indique por adelantado qué XML se reducirá y esto prueba si todo se analiza como se esperaba.

Respuesta actualizada para 2017

Lo siguiente analizará una cadena XML en un documento XML en todos los principales navegadores. A menos que necesite soporte para IE <= 8 o algún navegador oscuro, puede usar la siguiente función:

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

Si necesita admitir IE <= 8, lo siguiente hará el trabajo:

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 vez que tengas un Document obtenido vía parseXml, puede utilizar los métodos / propiedades transversales habituales de DOM, como childNodesy getElementsByTagName()para obtener los nodos que desee.

Ejemplo de uso:

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

Si está utilizando jQuery, a partir de la versión 1.5 puede utilizar su parseXML()método incorporado , que es funcionalmente idéntico a la función anterior.

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

La mayoría de los ejemplos en la web (y algunos presentados anteriormente) muestran cómo cargar un XML desde un archivo de manera compatible con el navegador. Esto resulta fácil, excepto en el caso de Google Chrome que no admite el document.implementation.createDocument()método. Al usar Chrome, para cargar un archivo XML en un objeto XmlDocument, debe usar el objeto XmlHttp incorporado y luego cargar el archivo pasando su URI.

En su caso, el escenario es diferente, porque desea cargar el XML desde una variable de cadena , no desde una URL. Sin embargo, para este requisito, Chrome supuestamente funciona igual que Mozilla (o eso he oído) y es compatible con el método parseFromString ().

Aquí hay una función que uso (es parte de la biblioteca de compatibilidad del navegador que estoy construyendo actualmente):

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 es un agradable analizador XML JavaScript de navegador cruzado. Está orientado a objetos y tiene muchos ejemplos, además de que la API está documentada. Es bastante nuevo, pero hasta ahora ha funcionado bien en uno de mis proyectos. Una cosa que me gusta es que leerá XML directamente de cadenas o URL y también puede usarlo para convertir el XML en JSON.

Aquí hay un ejemplo de lo que puede hacer 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") + "'"
    );
}

Siempre he usado el siguiente enfoque que funciona en IE y Firefox.

XML de ejemplo:

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

Aparentemente, jQuery ahora proporciona jQuery.parseXML http://api.jquery.com/jQuery.parseXML/ a partir de la versión 1.5

jQuery.parseXML( data ) Devoluciones: XMLDocument

Por favor, eche un vistazo a XML DOM Parser ( W3Schools ). Es un tutorial sobre el análisis XML DOM. El analizador DOM real difiere de un navegador a otro, pero la API DOM está estandarizada y sigue siendo la misma (más o menos).

Alternativamente, use E4X si puede restringirse a Firefox. Es relativamente más fácil de usar y es parte de JavaScript desde la versión 1.6. Aquí hay una pequeña muestra de uso ...

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

Para obtener más información, consulte http://www.easycodingclub.com/xml-parser-in-javascript/javascript-tutorials/

Descargo de responsabilidad : he creado fast-xml-parser

He creado fast-xml-parser para analizar una cadena XML en un objeto JS / JSON u objeto transversal intermedio. Se espera que sea compatible en todos los navegadores (aunque probado solo en 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 : No usa el analizador DOM, sino que analiza la cadena usando RE y la convierte en objeto JS / JSON.

Pruébelo en línea , CDN

También puede usar la función jquery ($. ParseXML) para manipular la cadena xml

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