web-dev-qa-db-fra.com

Analyse XML d'une chaîne de variable en JavaScript

J'ai un chaîne de variable qui contient un XML valide et bien formé. J'ai besoin d'utiliser du code JavaScript pour analyser ce flux.

Comment puis-je accomplir cela en utilisant du code JavaScript (compatible avec les navigateurs)?

javascriptxmlparsing
198
David Bonnici

Mise à jour: Pour une réponse plus correcte, voir réponse de Tim Down .

Internet Explorer et, par exemple, les navigateurs basés sur Mozilla exposant différents objets pour l'analyse XML, il est donc sage d'utiliser un framework JavaScript tel que jQuery pour gérer les différences entre les navigateurs.

Un exemple très basique est:

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

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

Remarque: comme indiqué dans les commentaires; jQuery n'effectue aucune analyse XML, il s'appuie sur la méthode DOM innerHTML et procède comme dans n'importe quel code HTML. Soyez donc prudent lorsque vous utilisez des noms d'élément HTML dans votre code XML. Mais je pense que cela fonctionne assez bien pour une simple "analyse" XML, mais ce n'est probablement pas recommandé pour une analyse XML intensive ou "dynamique", où vous ne spécifiez pas ce que XML va supprimer et cela vérifie si tout est analysé comme prévu.

90
Sander Versluys

Réponse mise à jour pour 2017

Ce qui suit va analyser une chaîne XML dans un document XML dans tous les principaux navigateurs. À moins que vous n'ayez besoin de l'assistance de IE <= 8 ou de navigateurs obscurs, vous pouvez utiliser la fonction suivante:

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

Si vous devez prendre en charge IE <= 8, les tâches suivantes feront l'affaire:

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

Une fois que vous avez obtenu une Document obtenue via parseXml, vous pouvez utiliser les méthodes/propriétés de traversée du DOM habituelles telles que childNodes et getElementsByTagName() pour obtenir les noeuds souhaités.

Exemple d'utilisation:

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

Si vous utilisez jQuery, à partir de la version 1.5, vous pouvez utiliser sa méthode parseXML() intégrée, qui est fonctionnellement identique à la fonction ci-dessus.

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

La plupart des exemples sur le Web (et certains présentés ci-dessus) montrent comment charger un fichier XML à partir d'un fichier d'une manière compatible avec le navigateur. Cela se révèle simple, sauf dans le cas de Google Chrome qui ne prend pas en charge la méthode document.implementation.createDocument(). Lorsque vous utilisez Chrome, pour charger un fichier XML dans un objet XmlDocument, vous devez utiliser l'objet XmlHttp intégré, puis charger le fichier en lui transmettant son URI.

Dans votre cas, le scénario est différent, car vous souhaitez charger le XML à partir d'une variable chaîne, pas une URL. Pour cette exigence cependant, Chrome est supposé fonctionner exactement comme Mozilla (c'est ce que j'ai entendu dire) et prend en charge la méthode parseFromString ().

Voici une fonction que j'utilise (elle fait partie de la bibliothèque de compatibilité de navigateur que je suis en train de construire):

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;
}
19
Cerebrus

Marknote est un analyseur syntaxique JavaScript JavaScript léger, multi-navigateurs. Il est orienté objet et contient de nombreux exemples, plus le API est documenté. C'est assez nouveau, mais cela a bien fonctionné dans l'un de mes projets jusqu'à présent. J'apprécie le fait qu'il lira XML directement à partir de chaînes ou d'URL et que vous pourrez également l'utiliser pour convertir le XML en JSON.

Voici un exemple de ce que vous pouvez faire avec 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") + "'"
    );
}
13
Mike McMillien

Apparemment, jQuery fournit maintenant jQuery.parseXML http://api.jquery.com/jQuery.parseXML/ à partir de la version 1.5

jQuery.parseXML( data ) Retourne: XMLDocument

8
Jamie Pate

J'ai toujours utilisé l'approche ci-dessous qui fonctionne dans IE et Firefox.

Exemple 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);
      }
    }
  }
}
8
John Topley

Veuillez jeter un oeil à analyseur de DOM XML ( W3Schools ). C'est un tutoriel sur l'analyse XML DOM. L'analyseur DOM actuel diffère d'un navigateur à l'autre, mais l'API DOM est normalisée et reste la même (plus ou moins).

Vous pouvez également utiliser E4X si vous pouvez restreindre vous-même à Firefox. Il est relativement facile à utiliser et fait partie de JavaScript depuis la version 1.6. Voici un petit exemple d'utilisation ...

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

Disclaimer : J'ai créé fast-xml-parser

J'ai créé fast-xml-parser pour analyser une chaîne XML dans un objet JS/JSON ou un objet traversal intermédiaire. Il devrait être compatible avec tous les navigateurs (toutefois testé sur Chrome, Firefox et IE uniquement).

Utilisation 

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

Note : il n'utilise pas l'analyseur DOM, mais analyse la chaîne avec RE et le convertit en objet JS/JSON.

Essayez en ligne , CDN

0
Amit Kumar Gupta
<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>

Pour plus d'informations, reportez-vous à cette http://www.easycodingclub.com/xml-parser-in-javascript/javascript-tutorials/

0
easycodingclub