Blog

To make all instances of a word be a specific color on a website, use the following code.

The words that should be changed color are listed in the array wordsToReplace. You have to have every variation of the word because the code is case sensitive. The Dictionary wordWraps lists out what each word will be wrapped by in case you want different words to have different changes.

You can add whatever class you want to the spans, but keep the wordWrap class as that is used to prevent duplicate wraps of an element.

PLEASE NOTE: There may be an issue of spaces not working next to words that had their color changed. All you need to do is add this css

white-space: pre;

to whatever wraps the text that word is in.

$(document).ready(function(){ var wordsToReplace = ['laser', 'Laser']; var wordWraps = { 'laser': [''], 'Laser': [''] } for(var i = 0; i < wordsToReplace.length; i++){ var textNode = $("div:contains('"+ wordsToReplace[i] +"')"); processElement(textNode, wordsToReplace[i], wordWraps[wordsToReplace[i]][0], wordWraps[wordsToReplace[i]][1]); } }); function processElement(element, wordToReplace, before, after){ element.contents().filter(function() { if(this.nodeType === 3){ var currentText = this.textContent; if(currentText.includes(wordToReplace)){ var newText = currentText.split(wordToReplace).join(before + wordToReplace + after); $(this).replaceWith(newText); } } else if(this.nodeType == 1){ if(this.nodeName != "SCRIPT"){ if(this.nodeName == "SPAN"){ if($(this).is('.wordWrap')){ return; } } processElement($(this), wordToReplace, before, after); } } }); }