Question

For example: There is a page that lists some items with colours. Some are listed as Nav some are listed as Navy.

$('.ProductDetails a').each(function() {
    var text = $(this).text();
    $(this).text(text.replace("Nav", "Navy")); 
});

Will result in all ‘Nav’ being changed to Navy – great!

But it will also result in ‘Navy’ being changed to Navyy. (i.e. it replaces the ‘nav’ in navy to navy and leaving the ‘y’ after the ‘nav’ has been replaced)

Is there a way to stop this using the technique above or will I have to change the script to account for these double ups.

My current solution is to add a space after Nav $(this).text(text.replace("Nav ", "Navy"));

But this isn’t ideal because some of the items may have a / after them and no space.

Answer 1

$('.ProductDetails a').each(function() {
    var text = $(this).text();
    $(this).text(text.replace(/^Nav$/g, "Navy")); 
});

Or:

    $(this).text(text.replace(/\sNav\s/g, "Navy")); 

Or:

    $(this).text(text.replace(/\bNav\b/g, "Navy")); 

There are many other ways…

Note that you can use this text overload:

$('.ProductDetails a').text(function(index, old) {
    return old.replace(/\sNav\s/g, "Navy");
});​