防止在textnode上转义特殊字符(JS-HTML)

Question

我按照这个片段http://bytes.com/topic/javascript/answers/504399-get-all-text-nodes

 var xPathResult = document.evaluate(
 './/text()[normalize-space(.) != ""]',
 document.body, null,
 XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
 null ); for (var i = 0, l = xPathResult.snapshotLength; i < l; i++) { 
 var textNode = xPathResult.snapshotItem(i);
 textNode.data = textNode.data.replace(/somePattern/g, 'replacement');
 }

我想替换某些模式,例如|12|用相应的表情符号!但是,当我做textNode.data.replace("|12|",'<.img src="favicon.ico"/>');的例如文本节目是..<.img src="favicon.ico"/>.. 我检查html我发现<.img src="favicon.ico"/>逃脱到<img src="favicon.ico"/> 是否可以防止这种情况并让图像显示？谢谢

注意:添加了额外的点在这里<.img src="favicon.ico"/>的目的

Answer 1

是的,data始终是纯文本.这意味着您不必担心转义中的字符,但这也意味着您不能将标记<img>放入其中.

天真的前进方式是替换innerHTML包含元素而不是使用文本界面.但是这很快就会给你带来很大的问题,部分原因是回写innerHTML你正在破坏和替换元素中的每个现有节点的手段(如果你有事件处理程序或表单值被破坏,伴随着烦恼),而且因为简单的字符串和正则表达式处理无法正确处理HTML.例如,如果您|12|在任何属性值中包含该字符串,那么替换将会造成很大的混乱.

更好:用于splitText将文本节点切割成模式匹配边缘的位,然后用新DOM元素替换表示匹配的文本:

var pattern= /\|12\|/;
var node= /* Text node you want to replace strings in */;

while (match= pattern.exec(node.data)) {
    var img= document.createElement('img');
    img.src= 'favicon.ico';

    node= node.splitText(match.index);
    node= node.splitText(match[0].length);
    node.parentNode.replaceChild(img, node.previousSibling);
};

(请注意,获取所有文本节点的XPath方法在IE上不可用.)