JQuery的XML解析：更換標籤

Question

我有下面的XML：

<?xml version="1.0" encoding="UTF-8" ?> 
<text> 
    Lorem <foo>ipsum</foo> dolor sit amet. 
</text> 

，我試圖解析這個XML與jQuery和替換<b></b>標籤的響應裏面的<foo>標籤。結果字符串應該是"Lorem <b>ipsum</b> dolor sit amet."

我做對XML這樣的GET請求：

$.ajax({ 
    type: "GET", 
    url: "response.xml", 
    dataType: "xml", 
    success: function(xml){ 

    } 
    }); 

我已經打過電話了replaceWith函數是這樣的：

$(xml).find("foo").replaceWith(function(){ 
    return "<b>" + $(this).text() + "</b>"; 
}); 

但這將完全從xml響應中刪除文本。有什麼我失蹤？

編輯：螢火蟲顯示以下錯誤：

此[0] .innerHTML是不確定的

Answer 1

嘗試使用

return "<b>" + $(this).html() + "</b>"; 

相反

Answer 2

這似乎用我的工作XML字符串直接在Firebug控制檯中：

var xml = $('<?xml version="1.0" encoding="UTF-8" ?><text>Lorem <foo>ipsum</foo> dolor sit amet.</text>'); 
xml.find('foo').replaceWith(function(){ 
    console.log(this); 
    return '<b>'+$(this).text()+'</b>'; 
}); 
console.log(xml); 

您的成功功能還會發生什麼？

Answer 3

我建議您使用Web瀏覽器的XML DOM而不是濫用jQuery來處理HTML。這裏是你如何解析XML到DOM：

var xmlDoc; 
if (window.DOMParser) 
{ 
    var parser = new DOMParser(); 
    xmlDoc = parser.parseFromString(xml, "text/xml"); 
} 
else // Internet Explorer 
{ 
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
    xmlDoc.async = "false"; 
    xmlDoc.loadXML(xml); 
} 

// Now do the tedious DOM manipulations on xmlDoc 
var foos = xmlDoc.getElementsByTagName('foo'); 
for (var i = 0; i < foos.length; i++) 
{ 
    var oldElem = foos[i]; 
    var replacement = xmlDoc.createElement("b"); 
    replacement.appendChild(xmlDoc.createTextNode(oldElem.childNodes[0].nodeValue)); 
    oldElem.parentNode.replaceChild(replacement, oldElem); 
} 

編輯

另一種可能是你使用客戶端XSLT將XML轉換成你想要的HTML。隨着XSLT文檔是這樣的：

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
       xmlns="http://www.w3.org/1999/xhtml"> 

    <xsl:template match="*"> 
    <xsl:value-of select="."/> 
    </xsl:template> 

    <xsl:template match="text"> 
    <span> 
     <xsl:apply-templates/> 
    </span> 
    </xsl:template> 

    <xsl:template match="foo"> 
    <b> 
     <xsl:apply-templates/> 
    </b> 
    </xsl:template> 

</xsl:stylesheet> 

您可以將您的樣品輸入到span與b標籤。如果你有很多轉換規則，XSLT可能比一堆糟糕的DOM操作代碼更易於維護。

Answer 4

jQuery是一個基於HTML的庫，處理XML（或通常跨文檔腳本）的能力有限。

一些方法將工作：find()和text()針對XML一般都可以。但是當你返回一個像<b>foo</b>這樣的標記字符串時，jQuery將使用它作爲HTML內容，並嘗試將其寫入元素的innerHTML。但是XML文檔不是HTML，因此不支持innerHTML，所以jQuery失敗。

在任何情況下，您都不想採用元素的text()並逐字將其用作標記。如果該文本包含<或&字符，該怎麼辦？這會破壞標記，並可能會導致跨站點腳本漏洞。不要使用天真的字符串吊索來準備HTML。

相反，使用DOM風格的方法。像replace()這樣的jQuery方法可以做到這一點，但是你不能使用簡單的replace('<b>')，因爲jQuery會將'<b>'轉換成當前HTML文檔擁有的HTML黑體元素，然後嘗試將該HTML元素插入到XML文檔，這將無法正常工作。相反，您需要使用XML DOM手動創建元素：

$(xml).find("foo").each(function() { 
    var b= xml.createElement('b'); 
    this.parentNode.replaceChild(b, this); 
    while (this.firstChild) 
     b.appendChild(this.firstChild); 
}); 

這改變了XML文檔。但是，如果你想要做的是將XML文檔轉換爲可用的HTML，這似乎並不能幫助你。使用序列化程序（依賴於瀏​​覽器）將其轉換回XML標記可能會使標記不必與HTML兼容（例如，空標記可能會自行關閉）。

要將XML元素可靠地導入到HTML中，最好手動完成。 （有爲importNode，但IE不支持它。）例如：

function xmlToDocument(node, dest) { 
    if (node.nodeType===1) { 

     // Create HTML element from XML element. Change name if 'foo'. 
     // 
     var tag= node.tagName.toLowerCase()==='foo'? 'b' : node.tagName; 
     var el= document.createElement(tag); 
     dest.appendChild(el); 

     // Copy attributes 
     // 
     for (var attri= node.attributes.length; attri-->0;) { 
      var attr= node.attributes[attri]; 
      el.setAttribute(attr.name, attr.value); 
     } 

     // Copy element contents 
     // 
     for (var child= node.firstChild; child!==null; child= child.nextSibling) 
      xmlToDocument(child, el); 

    } 
    else if (node.nodeType===3) 
     dest.appendChild(document.createTextNode(node.)); 
} 

你知道...它可能更容易只是返回一些HTML標記的JSON對象。