JavaScript 변수 문자열의 XML 구문 분석
올바른 형식의 유효한 XML을 포함하는 변수 문자열이 있습니다. 이 피드를 구문 분석하려면 JavaScript 코드를 사용해야 합니다.
(브라우저 호환) JavaScript 코드를 사용하여 이를 수행하려면 어떻게 해야 합니까?
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);
jQuery를 사용하는 경우 버전 1.5부터는 위의 기능과 동일한 내장 메서드를 사용할 수 있습니다.
var xml = $.parseXML("<foo>Stuff</foo>");
alert(xml.documentElement.nodeName);
예를 들어 Internet Explorer 및 Mozilla 기반 브라우저는 XML 해석을 위해 서로 다른 개체를 표시하므로 jQuery와 같은 JavaScript 프레임워크를 사용하여 크로스 브라우저 차이를 처리하는 것이 좋습니다.
가장 기본적인 예는 다음과 같습니다.
var xml = "<music><album>Beethoven</album></music>";
var result = $(xml).find("album").text();
주의: 코멘트에서 지적된 바와 같이 jQuery는 XML 해석을 전혀 하지 않습니다.DOM inner에 의존합니다.HTML 메서드와 마찬가지로 해석하기 때문에 XML에서 HTML 요소 이름을 사용할 때는 주의해 주십시오.그러나 간단한 XML '파싱'에는 꽤 효과가 있다고 생각합니다만, 집약적인 XML 해석이나 동적 XML 해석에는 권장되지 않습니다.어떤 XML이 다운되는지는 사전에 알 수 없고, 모든 것이 예상대로 해석되면 이 테스트를 실시합니다.
웹상의 대부분의 예(및 위의 예도 포함)에서는 브라우저와 호환되는 방법으로 파일에서 XML을 로드하는 방법을 보여 줍니다.이것은 쉽다는 것을 증명합니다. 단, 구글 크롬은document.implementation.createDocument()방법.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>
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);
}
}
}
}
jQuery가 jQuery.parseX를 제공하게 되었습니다.ML http://api.jquery.com/jQuery.parseXML/ (버전 1.5
jQuery.parseXML( data ) 품::XMLDocument
XML DOM 파서(W3 Schools)를 봐 주세요.XML DOM 구문 분석에 대한 튜토리얼입니다.실제 DOM 파서는 브라우저마다 다르지만 DOM API는 표준화되어 있으며 거의 동일합니다.
파이어폭스로 한정할 수 있는 경우는, 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.
면책사항 : 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 개체로 변환합니다.
<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/ 를 참조해 주세요.
jquery 함수($.parseX)를 사용할 수도 있습니다.ML) xml 문자열을 조작하다
예제 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'))
})
언급URL : https://stackoverflow.com/questions/649614/xml-parsing-of-a-variable-string-in-javascript
'programing' 카테고리의 다른 글
| 테이블이 있는 경우 드롭 테이블을 만들고, 없는 경우 테이블만 만듭니다. (0) | 2023.02.03 |
|---|---|
| Javascript로 쿼리 문자열을 작성하는 방법 (0) | 2023.02.03 |
| PyPy -- 어떻게 CPython을 이길 수 있을까요? (0) | 2023.02.03 |
| SQL: MySQL에서 기존 열을 기본 키로 설정 (0) | 2023.02.03 |
| JavaScript에서 변수가 배열인지 확인하려면 어떻게 해야 합니까? (0) | 2023.02.03 |