Take the 2-minute tour ×

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.

share|improve this question
Actually, if you have control over the code, wrapping it in spans styled with italic text-decoration in CSS would be a lot better IMO. –  adeneo Dec 17 '12 at 18:41
Look for a word highlighting plugin, there are many out there that will do this for you. It isn't a very simple task to take on on your own if you must do it with javascript. –  Kevin B Dec 17 '12 at 18:41
What @adeneo said. Use a global find-and-replace in your HTML editor, wrap them in <span class="podunk">...</span> and add an !important CSS style. If you try to do this automatically in jQuery it will eventually screw something up. –  Blazemonger Dec 17 '12 at 18:43
Are you willing to use a third party library like jQuery? –  major-mann Dec 17 '12 at 18:44
!important is a blunt tool. Better to use a more-specific CSS selector. –  Diodeus Dec 17 '12 at 18:46

2 Answers 2

up vote 1 down vote accepted

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 *")
    .filter(function() {
        if (this.nodeType !== 3){
            return false;
        return true;
        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


you end up with

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

I think with a little consideration this could be overcome.

share|improve this answer
This is great, however, it replaces within attributes too which can have odd side effects. Hover over the link in this fiddle. jsfiddle.net/j7tHT It will also destroy any event handlers or data that is stored on the elements that are being replaced in this way. –  Kevin B Dec 17 '12 at 18:52
@Kevin This is true but the word is so unique (their trademark) that it might not make a difference in the long run –  Jim Beam Dec 17 '12 at 18:58

If it needs to appear in italics, the absolute surest way is to use <i>Podunk</i> and to make the best effort to ensure that the font family used has an italic typeface.

It is a misguided aim anyway, so you should not worry about colleagues saying that the i markup is not “semantic”. But you might consider using <i class=company>Podunk</i>, just to make it easier to drop such use of italic without dropping sensible uses of italic, should the client come to their senses.

share|improve this answer

Your Answer


