Phân tích cú pháp XML của một chuỗi biến trong JavaScript

Tôi có một chuỗi biến chứa XML hợp lệ và hợp lệ. Tôi cần sử dụng mã JavaScript để phân tích nguồn cấp dữ liệu này.

Làm cách nào tôi có thể thực hiện việc này bằng mã JavaScript (tương thích với trình duyệt)?

Cập nhật: Để có câu trả lời chính xác hơn, hãy xem câu trả lời của Tim Down .

Internet Explorer và, ví dụ, các trình duyệt dựa trên Mozilla phơi bày các đối tượng khác nhau để phân tích cú pháp XML, vì vậy nên sử dụng khung JavaScript như jQuery để xử lý các khác biệt giữa các trình duyệt.

Một ví dụ thực sự cơ bản là:

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

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

Lưu ý: Như đã chỉ ra trong các ý kiến; jQuery không thực sự làm bất kỳ phân tích cú pháp XML nào, nó dựa vào phương thức DOM bên trong DOM và sẽ phân tích nó giống như bất kỳ HTML nào, vì vậy hãy cẩn thận khi sử dụng tên thành phần HTML trong XML của bạn. Nhưng tôi nghĩ rằng nó hoạt động khá tốt đối với 'phân tích cú pháp' XML đơn giản, nhưng có lẽ nó không được đề xuất cho phân tích cú pháp XML chuyên sâu hoặc 'động' khi bạn không trả lời những gì XML sẽ xuất hiện và điều này sẽ kiểm tra nếu mọi thứ phân tích như mong đợi.

Cập nhật câu trả lời cho năm 2017

Sau đây sẽ phân tích một chuỗi XML thành một tài liệu XML trong tất cả các trình duyệt chính. Trừ khi bạn cần hỗ trợ cho IE <= 8 hoặc một số trình duyệt tối nghĩa, bạn có thể sử dụng chức năng sau:

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

Nếu bạn cần hỗ trợ IE <= 8, việc sau sẽ thực hiện công việc:

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

Khi bạn có Documentđược thông qua parseXml, bạn có thể sử dụng các phương thức / thuộc tính truyền tải DOM thông thường như childNodesvàgetElementsByTagName() để có được các nút bạn muốn.

Ví dụ sử dụng:

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

Nếu bạn đang sử dụng jQuery, từ phiên bản 1.5, bạn có thể sử dụng parseXML()phương thức tích hợp sẵn của nó , giống như chức năng ở trên.

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

Hầu hết các ví dụ trên web (và một số trình bày ở trên) cho thấy cách tải XML từ một tệp theo cách tương thích với trình duyệt. Điều này chứng tỏ dễ dàng, ngoại trừ trong trường hợp Google Chrome không hỗ trợ document.implementation.createDocument()phương pháp. Khi sử dụng Chrome, để tải tệp XML vào đối tượng XmlDocument, bạn cần sử dụng đối tượng XmlHttp sẵn có và sau đó tải tệp bằng cách chuyển URI của nó.

Trong trường hợp của bạn, kịch bản là khác nhau, vì bạn muốn tải XML từ một biến chuỗi chứ không phải URL. Tuy nhiên, đối với yêu cầu này, Chrome được cho là hoạt động giống như Mozilla (hoặc tôi đã nghe) và hỗ trợ phương thức parseFromString ().

Đây là một chức năng tôi sử dụng (nó là một phần của thư viện tương thích Trình duyệt tôi hiện đang xây dựng):

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 là một trình phân tích cú pháp JavaScript XML đa trình duyệt nhẹ. Nó hướng đối tượng và nó có rất nhiều ví dụ, cộng với API được ghi lại. Nó khá mới, nhưng nó đã hoạt động tốt trong một trong những dự án của tôi cho đến nay. Một điều tôi thích ở đây là nó sẽ đọc XML trực tiếp từ các chuỗi hoặc URL và bạn cũng có thể sử dụng nó để chuyển đổi XML thành JSON.

Đây là một ví dụ về những gì bạn có thể làm với 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") + "'"
    );
}

Tôi đã luôn sử dụng cách tiếp cận dưới đây hoạt động trong IE và Firefox.

Ví dụ 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);
      }
    }
  }
}

Rõ ràng jQuery hiện cung cấp jQuery.parseXML http://api.jquery.com/jQuery.parseXML/ kể từ phiên bản 1.5

jQuery.parseXML( data ) Trả về: XMLDocument

Vui lòng xem XML DOM Parser ( W3Schools ). Đây là một hướng dẫn về phân tích cú pháp XML DOM. Trình phân tích cú pháp DOM thực tế khác nhau từ trình duyệt này sang trình duyệt khác nhưng API DOM được chuẩn hóa và giữ nguyên (ít nhiều).

Hoặc sử dụng E4X nếu bạn có thể hạn chế sử dụng Firefox. Nó tương đối dễ sử dụng hơn và nó là một phần của JavaScript kể từ phiên bản 1.6. Đây là một cách sử dụng mẫu nhỏ ...

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

Để biết thêm thông tin, hãy tham khảo http://www.easycodingclub.com/xml-parser-in-javascript/javascript-tutorials/

Tuyên bố miễn trừ trách nhiệm : Tôi đã tạo trình phân tích cú pháp nhanh xml

Tôi đã tạo trình phân tích cú pháp nhanh-xml để phân tích chuỗi XML thành đối tượng JS / JSON hoặc đối tượng truyền tải trung gian. Nó dự kiến ​​sẽ tương thích trong tất cả các trình duyệt (tuy nhiên chỉ được thử nghiệm trên Chrome, Firefox và IE).

Sử dụng

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

Lưu ý : Nó không sử dụng trình phân tích cú pháp DOM mà phân tích chuỗi bằng RE và chuyển đổi nó thành đối tượng JS / JSON.

Dùng thử trực tuyến , CDN

Bạn cũng có thể thông qua hàm jquery ($. ParseXML) để thao tác chuỗi xml

ví dụ 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'))
})