Question

I have a web page for the Podunk company. But every time Podunk appears on the page (no matter where it is) it needs to be shown as Podunk!

Note that this is ANYWHERE on the page so it could be in header tags, list tags, in multiple nested DIVs, etc.

What is the best way to go about this? I’m thinking that jQuery is the better solution (as opposed to CSS) but I don’t know how to go about it? Can someone please provide a code snippet for this kind of replacement on an entire page element.

Answer 1

My original answer was incorrect (as pointed out in the comment 🙂 ) I have edited this answer to include the correct solution.

var rgx = /Podunk/g;
$("body *")
    .contents()
    .filter(function() {
        if (this.nodeType !== 3){
            return false;
        }
        return true;
    })
    .each(function(){
        var $this = $(this);
        var txt = $this.text();
        if (rgx.test(txt)){
            $this.replaceWith("<span>" + txt.replace(rgx,"<span class='podunk'>Podunk</span>") + "</span>");
        };
    });​

This has the downside that any element that has only Podunk in it gets and additional span element. ie, if you have

<a>Podunk</a> 

you end up with

<a><span><span class="podunk">Podunk</span></span>. 

I think with a little consideration this could be overcome.