JavaScriptでの変数文字列のXML解析
整形式で有効なXMLを含む変数文字列があります。このフィードを解析するにはJavaScriptコードを使用する必要があります。
(ブラウザー互換の)JavaScriptコードを使用してこれを達成するにはどうすればよいですか?
更新:より正確な答えについては、 ティムダウンの答え を参照してください。
Internet Explorerや、たとえばMozillaベースのブラウザーは、XML解析用に異なるオブジェクトを公開するため、 jQuery のようなJavaScriptフレームワークを使用して、ブラウザー間の違いを処理するのが賢明です。
本当に基本的な例は次のとおりです。
var xml = "<music><album>Beethoven</album></music>";
var result = $(xml).find("album").text();
注:コメントで指摘されているとおり。 jQueryは実際にはXML解析を一切行いません。DOMinnerHTMLメソッドに依存し、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
を取得したら、childNodes
やgetElementsByTagName()
などの通常のDOMトラバーサルメソッド/プロパティを使用して、必要なノードを取得できます。
使用例:
var xml = parseXml("<foo>Stuff</foo>");
alert(xml.documentElement.nodeName);
JQueryを使用している場合、バージョン1.5以降では、組み込みの parseXML()
メソッドを使用できます。これは、上記の関数と機能的に同じです。
var xml = $.parseXML("<foo>Stuff</foo>");
alert(xml.documentElement.nodeName);
Web上のほとんどの例(および上記のいくつか)は、ブラウザー互換の方法でXMLを読み込む方法を示していますファイルから。これは、document.implementation.createDocument()
メソッドをサポートしていないGoogle Chromeの場合を除き、簡単です。 Chromeを使用する場合、XMLファイルをXmlDocumentオブジェクトにロードするには、組み込みのXmlHttpオブジェクトを使用し、URIを渡すことでファイルをロードする必要があります。
あなたの場合、XMLではなく文字列変数からをロードしたいので、シナリオは異なります。URLではありません。ただし、この要件の場合、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 が文書化されています。かなり新しいものですが、これまでの私のプロジェクトでうまく機能しました。私が気に入っていることの1つは、文字列または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") + "'"
);
}
どうやらjQueryはjQuery.parseXMLを提供するようになりました http://api.jquery.com/jQuery.parseXML/ バージョン1.5以降
jQuery.parseXML( data )
戻り値:XMLDocument
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);
}
}
}
}
XML DOMパーサー( W3Schools )をご覧ください。これはXML DOM解析のチュートリアルです。実際のDOMパーサーはブラウザーごとに異なりますが、DOM APIは標準化されており、ほぼ同じままです。
あるいは、 E4X を使用できる場合は restrict を使用してください。バージョン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
fast-xml-parser を作成して、XML文字列をJS/JSONオブジェクトまたは中間トラバーサルオブジェクトに解析します。すべてのブラウザで互換性があることが期待されます(ただし、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/