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上不可用。）

Answer 2

textNode.data是元素中的CDATA。你需要的是在textNode.innerHTML

中替换

Answer 3

感谢所有帮助:)）我将循环遍历所有文本节点

这是一个firefox扩展：D我从未接近IE！你们真棒！编辑：安装并试一试：D https://addons.mozilla.org/en-US/firefox/addon/14455/

防止在textnode上转义特殊字符（JS-HTML）

3 个答案: