使用 javascript 小书签在网页中查找所有“旧”实例并用“新”替换每个实例答案

【问题标题】：Find all instances of 'old' in a webpage and replace each with 'new', using a javascript bookmarklet使用 javascript 小书签在网页中查找所有“旧”实例并用“新”替换每个实例
【发布时间】：2010-11-13 15:07:40
【问题描述】：

我想要做的是用 JS 小书签或greasemonkey 脚本中的“新”替换网页中所有“旧”实例。我怎样才能做到这一点？我想 jQuery 或其他框架都可以，因为有一些技巧可以将它们包含在小书签和油脂猴脚本中。

【问题讨论】：

标签： javascript scripting greasemonkey bookmarklet replace

【解决方案1】：

一个防破坏的功能。这意味着这不会触及任何标签或属性，只会触及文本。

function htmlreplace(a, b, element) {    
    if (!element) element = document.body;    
    var nodes = element.childNodes;
    for (var n=0; n<nodes.length; n++) {
        if (nodes[n].nodeType == Node.TEXT_NODE) {
            var r = new RegExp(a, 'gi');
            nodes[n].textContent = nodes[n].textContent.replace(r, b);
        } else {
            htmlreplace(a, b, nodes[n]);
        }
    }
}

htmlreplace('a', 'r');

书签版本：

javascript:function htmlreplace(a,b,element){if(!element)element=document.body;var nodes=element.childNodes;for(var n=0;n<nodes.length;n++){if(nodes[n].nodeType==Node.TEXT_NODE){nodes[n].textContent=nodes[n].textContent.replace(new RegExp(a,'gi'),b);}else{htmlreplace(a,b,nodes[n]);}}}htmlreplace('old','new');

【讨论】：

将我的答案编辑为不需要 jQuery
很抱歉重温这么旧的帖子，但注意到您的正则表达式是在循环内部构建的。为了提高效率，您确实应该在函数顶部创建一次正则表达式。

【解决方案2】：

如果你替换了 innerHtml 那么你将销毁页面上的所有 dom 事件。尝试遍历文档替换文本：

function newTheOlds(node) {
    node = node || document.body;
    if(node.nodeType == 3) {
        // Text node
        node.nodeValue = node.nodeValue.split('old').join('new');
    } else {
        var nodes = node.childNodes;
        if(nodes) {
            var i = nodes.length;
            while(i--) newTheOlds(nodes[i]);
        }
    }
}

newTheOlds();

如果您不需要模式匹配，则拆分/连接比“替换”更快。如果您需要模式匹配，请使用“替换”和正则表达式：

node.nodeValue = node.nodeValue.replace(/(?:dog|cat)(s?)/, 'buffalo$1');

作为书签：

javascript:function newTheOlds(node){node=node||document.body;if(node.nodeType==3){node.nodeValue=node.nodeValue.split('old').join('new');}else{var nodes=node.childNodes;if(nodes){var i=nodes.length;while(i--)newTheOlds(nodes[i]);}}}newTheOlds();

【讨论】：

【解决方案3】：

对于较旧的浏览器，需要将 Node.TEXT_NODE 更改为 3 并将 node.textContent 更改为 node.nodeValue；所以最终函数应该是：

function htmlreplace(a, b, element) {    
    if (!element) element = document.body;    
    var nodes = element.childNodes;
    for (var n=0; n<nodes.length; n++) {
        if (nodes[n].nodeType == 3) { //Node.TEXT_NODE == 3
            var r = new RegExp(a, 'gi');
            nodes[n].nodeValue = nodes[n].nodeValue.replace(r, b);
        } else {
            htmlreplace(a, b, nodes[n]);
        }
    }
}

【讨论】：

【解决方案4】：

一条适用于 jQuery 的简单代码：

`javascript:var a = function(){$("body").html($("body").html().replace(/old/g,'new'));return;}; a();`

没有 jQuery：

`javascript:function a (){document.body.innerHTML=document.body.innerHTML.replace(/old/g, "new" );return;}; a();`

什么都不返回的函数很重要，所以执行小书签后浏览器不会重定向到任何地方。

【讨论】：

【解决方案5】：

另一种递归方法：

function replaceText(oldText, newText, node){ 
  node = node || document.body; 

  var childs = node.childNodes, i = 0;

  while(node = childs[i]){ 
    if (node.nodeType == Node.TEXT_NODE){ 
      node.textContent = node.textContent.replace(oldText, newText); 
    } else { 
      replaceText(oldText, newText, node); 
    } 
    i++; 
  } 
}

缩小书签：

javascript:function replaceText(ot,nt,n){n=n||document.body;var cs=n.childNodes,i=0;while(n=cs[i]){if(n.nodeType==Node.TEXT_NODE){n.textContent=n.textContent.replace(ot,nt);}else{replaceText(ot,nt,n);};i++;}};replaceText('old','new');

【讨论】：

【解决方案6】：

好的，我只是将人们提出的一些很棒的东西整合到一个答案中。

这是 Sixthgear 的 jQuery 代码，但可以移植（我从大 G 获取 jQuery）并缩小为书签：

javascript:var scrEl=document.createElement('script');scrEl.setAttribute('language','javascript');scrEl.setAttribute('type','text/javascript');scrEl.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js');function htmlreplace(a,b,element){if(!element)element=document.body;var nodes=$(element).contents().each(function(){if(this.nodeType==Node.TEXT_NODE){var r=new RegExp(a,'gi');this.textContent=this.textContent.replace(r,b);}else{htmlreplace(a,b,this);}});}htmlreplace('old','new');

请注意，“旧”可以是“字符串文字”或“reg[Ee]x”。

实际上，现在我想起来，sixgear 是最好的答案，尤其是我的增强功能。我找不到其他答案添加的任何内容，使用 jQuery 实现了令人难以置信的 X 浏览器兼容性。另外，我实在是太懒了。社区维基，享受吧！

【讨论】：

【解决方案7】：

嘿，你可以试试这个，问题是它搜索整个身体，所以甚至属性等都会改变。

javascript:document.body.innerHTML=document.body.innerHTML.replace( /old/g, "new" );

【讨论】：

【解决方案8】：

我正在尝试稍微修改它，以便它提示输入要搜索的文本，然后是要替换的文本，当所有处理完成后，显示一个对话框让我知道它已经完成。

我计划在 phpmyadmin 数据库编辑页面上使用它，该页面将有任意数量的文本框填充文本（这是我需要它来搜索和替换的内容）。此外，要搜索和替换的文本可能是多行的，也可能不是多行的，所以我在正则表达式中添加了“m”参数，而且，由于我将进行可能包含 html 的搜索/替换，它们'通常会在其中包含引号/双引号。例如：

搜索：

<img height="76" width="92" src="http://www.gifs.net/Animation11/Hobbies_and_Entertainment/Games_and_Gambling/Slot_machine.gif" /></div>
<div class="rtecenter"> <strong><em><font color="#ff0000">Vegas Baby!<br />
</font></em></strong></div>

并且可能什么都不替换（只是为了删除所有代码），或者其他一些html。到目前为止，这是我想出的小书签，（javascript，尤其是小书签不是我经常弄乱的东西）但是，就查找/替换而言，它没有任何作用，尽管它确实正确提示。

javascript:var%20scrEl=document.createElement('script');scrEl.setAttribute('language','javascript');scrEl.setAttribute('type','text/javascript');scrEl.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js');function%20htmlreplace(a,b,element){if(!element)element=document.body;var%20nodes=$(element).contents().each(function(){if(this.nodeType==Node.TEXT_NODE){var%20r=new%20RegExp(a,'gim');this.textContent=this.textContent.replace(r,b);}else{htmlreplace(a,b,this);alert('Done%20processing.');}});}htmlreplace(prompt('Text%20to%20find:',''),prompt('Replace%20with:',''));

有人有什么想法吗？

【讨论】：