代码之家 › 专栏 › 技术社区 › unloco

防止在textnode(js-html)上转义特殊字符

special-characters html javascript

unloco · 技术社区 · 14 年前

我听了这个片段 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"/> 出于目的

3 回复 | 直到 14 年前

bobince 14 年前

对, data 总是纯文本。这意味着您不必担心其中的转义字符,但也意味着您不能像 <img> 进入它。

中堂的前进方向是 innerHTML 而不是使用文本接口。但这会很快给你带来很大的问题,部分原因是 内层HTML 这意味着您正在销毁和替换元素中的每个现有节点(如果您已经销毁了事件处理程序或其上的表单值,则会带来麻烦),但也因为简单的字符串和正则表达式处理无法正确处理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上不可用。)