JavaScript에서 변수 문자열의 XML 구문 분석

나는 올바른 형식의 유효한 XML이 포함 변수 문자열 이 있습니다. 이 피드를 파싱하려면 JavaScript 코드를 사용해야합니다.

(브라우저 호환) JavaScript 코드를 사용하여이 작업을 수행하려면 어떻게해야합니까?

업데이트 : 더 정확한 답변은 Tim Down의 답변을 참조하십시오 .

Internet Explorer 및 예를 들어 Mozilla 기반 브라우저는 XML 구문 분석을 위해 다른 객체를 노출하므로 jQuery 와 같은 JavaScript 프레임 워크를 사용하는 것이 좋습니다 브라우저 간 차이를 처리하는 .

정말 기본적인 예는 다음과 같습니다.

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

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

참고 : 의견에서 지적한 바와 같이; jQuery는 XML 구문 분석을 실제로 수행하지 않으며 DOM innerHTML 메소드를 사용하며 HTML처럼 HTML 구문 분석하므로 XML에서 HTML 요소 이름을 사용할 때주의하십시오. 그러나 간단한 XML '구문 분석'에는 상당히 효과적이라고 생각하지만 XML이 다운 될 부분을 미리 예측하지 않는 집중적 또는 '동적'XML 구문 분석에는 권장되지 않으며 모든 것이 예상대로 구문 분석되는 경우 테스트합니다.

2017 년 업데이트 된 답변

다음은 모든 주요 브라우저에서 XML 문자열을 XML 문서로 구문 분석합니다. IE <= 8 또는 일부 모호한 브라우저를 지원하지 않으면 다음 기능을 사용할 수 있습니다.

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

IE <= 8을 지원해야하는 경우 다음 작업이 수행됩니다.

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

당신은 일단 Document을 통해 얻을 parseXml, 당신과 같은 일반적인 DOM 탐색 방법 / 속성을 사용할 수 있습니다 childNodes및getElementsByTagName() 당신이 원하는 노드를 얻을 수 있습니다.

사용법 예 :

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

버전 1.5부터 jQuery를 사용하는 경우 기본 제공 parseXML()메소드를 사용할 수 있으며 이는 기능과 기능이 동일합니다.

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

웹 (및 위에 제시된 일부)의 대부분의 예 는 브라우저 호환 방식으로 파일 에서 XML을로드하는 방법을 보여줍니다 . 이 document.implementation.createDocument()방법을 지원하지 않는 Chrome의 경우를 제외하고는 쉽게 입증 됩니다. Chrome을 사용할 때 XML 파일을 XmlDocument 객체로로드하려면 내장 XmlHttp 객체를 사용한 다음 URI를 전달하여 파일을로드해야합니다.

귀하의 경우 URL이 아닌 문자열 변수에서 XML을로드하려고하기 때문에 시나리오가 다릅니다 . 그러나이 요구 사항을 위해 Chrome은 Mozilla와 동일하게 작동하며 parseFromString () 메서드를 지원합니다.

다음은 내가 사용하는 기능입니다 (현재 빌드하고있는 브라우저 호환성 라이브러리의 일부입니다).

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 는 경량의 브라우저 간 JavaScript XML 파서입니다. 객체 지향적이며 많은 예제 가 있으며 API 가 문서화되어 있습니다. 상당히 새롭지 만 지금까지 내 프로젝트 중 하나에서 훌륭하게 작동했습니다. 내가 좋아하는 한 가지는 문자열이나 URL에서 직접 XML을 읽고 XML을 JSON으로 변환하는 데 사용할 수 있다는 것입니다.

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

나는 항상 아래의 접근법을 사용하여 IE와 Firefox에서 작동합니다.

XML 예 :

<fruits>
  <fruit name="Apple" colour="Green" />
  <fruit name="Banana" colour="Yellow" />
</fruits>

자바 스크립트 :

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

분명히 jQuery는 이제 버전 1.5 기준으로 jQuery.parseXML http://api.jquery.com/jQuery.parseXML/ 을 제공합니다.

jQuery.parseXML( data ) 보고: XMLDocument

XML DOM 파서 ( W3Schools )를 살펴보십시오 . XML DOM 파싱에 대한 튜토리얼입니다. 실제 DOM 파서는 브라우저마다 다르지만 DOM API는 표준화되어 있으며 동일하거나 거의 동일합니다.

Firefox로 자신을 제한 할 수있는 경우 E4X를 사용 하십시오. 사용하기가 비교적 쉽고 버전 1.6 이후 JavaScript의 일부입니다. 작은 샘플 사용법은 다음과 같습니다.

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

자세한 내용은 http://www.easycodingclub.com/xml-parser-in-javascript/javascript-tutorials/를 참조하십시오 .

면책 조항 : fast-xml-parser를 만들었습니다.

XML 문자열 을 JS / JSON 객체 또는 중간 순회 객체로 구문 분석하기 위해 fast-xml-parser 를 만들었습니다 . 모든 브라우저에서 호환 될 것으로 예상됩니다 (단, Chrome, Firefox 및 IE에서만 테스트 됨).

용법

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

참고 : DOM 파서는 사용하지 않지만 RE를 사용하여 문자열을 구문 분석하고 JS / JSON 객체로 변환하십시오.

온라인으로 사용해보십시오 , CDN

jquery 함수 ($ .parseXML)를 통해 XML 문자열을 조작 할 수도 있습니다.

자바 스크립트 예 :

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