Javascript .replace命令替换页面文本？

Question

JavaScript命令.replace可以替换任何网页中的文本吗？我想创建一个Chrome扩展程序来替换任何网页中的特定单词以说出其他内容(例如蛋糕而不是饼图).

Answer 1

该.replace方法是一个字符串操作,因此在由DOM Node对象组成的HTML文档上运行操作并不是很简单.

使用TreeWalker API

最好的办法去通过每一个节点在DOM和替换文本中它是使用document.createTreeWalker方法来创建一个TreeWalker对象-这是在很多的Chrome扩展程序中使用的做法!

// create a TreeWalker of all text nodes
var allTextNodes = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT),
    // some temp references for performance
    tmptxt,
    tmpnode,
    // compile the RE and cache the replace string, for performance
    cakeRE = /cake/g
    replaceValue = "pie";

// iterate through all text nodes
while (allTextNodes.nextNode()) {
    tmpnode = allTextNodes.currentNode;
    tmptxt = tmpnode.nodeValue;
    tmpnode.nodeValue = tmptxt.replace(cakeRE, replaceValue);
}

不要使用innerHTML或innerText

// the innerHTML property of any DOM node is a string
document.body.innerHTML = document.body.innerHTML.replace(/cake/g,'pie')

• 它通常较慢(特别是在移动设备上).
• 它有效地去除和替换整个DOM,这是不真棒并可能有一定的副作用:(经由的addEventListener或.onxxxx属性)它破坏附着在JavaScript代码的所有事件侦听器从而打破了功能部分/完全.
• 然而,这是一种常见,快速且非常脏的方法.