Find all instances of 'old' in a webpage a

问题:

What I want to do is replace all instances of 'old' in a webpage with 'new' in a JS bookmarklet or a greasemonkey script. How can I do this? I suppose jQuery or other frameworks are okay, as there're hacks to include them in both bookmarklets as well as greasemonkey scripts.

回答1:

A function that is clobber-proof. That mean's this won't touch any tags or attributes, only text.

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');

Bookmarklet version:

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');

回答2:

If you replace the innerHtml then you will destroy any dom events you have on the page. Try traversing the document to replace text:

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();

The split/join is faster than doing "replace" if you do not need pattern matching. If you need pattern matching then use "replace" and a regex:

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

As a bookmarklet:

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:

For older browsers will need to change Node.TEXT_NODE to 3 and the node.textContent to node.nodeValue; so final function should read:

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:

A simple line that works along jQuery:

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

Without jQuery:

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

The function returning nothing is very important, so the browser is not redirected anywhere after executing the bookmarklet.

回答5:

Yet another recursive approach:

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++; 
  } 
}

Minified bookmarklet:

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:

Okay, I'm just consolidating some of the great stuff that people are putting up in one answer.

Here is sixthgear's jQuery code, but made portable (I source jQuery from the big G) and minified into a bookmarklet:

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');

NOTE that 'old' can be either a 'string literal', or a 'reg[Ee]x'.

Actually, now that I think about it, sixthgear's is the best answer, especially with my enhancements. I can't find anything that the other answers add over it, using jQuery achieves incredible X-browser compatibility. Plus, I'm just too damn lazy. community wiki, Enjoy!

回答7:

Hey you could try this, problem is it searches the entire body so even attributes and such get changed.

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

回答8:

I'm trying to slightly modify this so that it prompts for the text to search for, followed by the text to replace with, and when all done processing, show a dialog box letting me know it's done.

I plan to use it on a phpmyadmin database edit page that'll have any number of textboxes filled with text (which is what I need it to search and replace in). Also, the text to search for and replace may or may not be multi-line, so I've added the 'm' param in the regex, and also, since I'll be doing searches/replaces that may contain html, they'll often have quotes/double quotes in them. ex:

Search for:

<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>

and maybe replace with nothing (just to erase all that code), or some other html. So far this is the bookmarklet I've come up with, (javascript, and especially bookmarklets aren't something I mess with often) however, it does nothing as far as finding/replacing, although it does do the prompting correctly.

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:',''));

Anyone have any ideas?