Question

Currently I am using a Jquery string to try and target a SPECIFIC word in the entire body of the site and add a class to it. So every single time the word “Nike” appears for example it will make it red and attach a TM to the end of it.

I have been using this but it only replaces the 1st occurrences of the work Nike in the content and I cannot figure out why its not replacing all of them.

Here is the sample: http://jsbin.com/ijufu3/21/

Any ideas?

Answer 1

I’d suggest something along the lines of:

$('body').html(
    function(i,h){
        return h.replace(/(Nike)/g,'<span class="nike tm">$1</span>');
    });​

Coupled with the following CSS:

.tm::after {
    content: '™';
}

.nike {
    color: red;
}​

JS Fiddle demo.

Where the selector is amended to whatever elements in which you expect to find the word.

Given that you may need to target browsers that don’t implement the ::after pseudo-elements/CSS-generated content, then there’s also the option of:

$('body').html(
    function(i,h){
        return h.replace(/(Nike)/g,'<span class="nike">$1™</span>');
    });​

JS Fiddle demo.

Which omits adding the tm class and explicitly adds that character to the HTML string returned.

These approaches work because regular expressions allow for the use of the g (I think ‘global’?) flag, which replaces every occurence of the encountered match (the string within the parentheses). Because you’re looking at the html content, though, this carries the risks that any class-name of nike will itself also be replaced, so be very, very sure that this string will not crop up in unexpected places (where the replacement would cause problems).