Javascript word highlighting in a text

Question

I have a variable called output in Javascript, which has the following content.

var output = "something."

I want to search and highlight the words "word1" and "word2" in them when I display the content of output. The above content is dynamic. Assuming I have a variable output which has the text and an array called arr1 which has the elements to be searched and highlighted, how can I display the entire content with words highlighted in javascript?Please let me know. Thanks in advance.

Answer 1

Assuming you want literal phrases that are generally just words (no special characters or punctuation), you could use a regular expression similar to this (I've also added case insensitivity):

 var output = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."; var arr1 = ['eiusmod tempor', 'consectetur']; var regex = new RegExp('('+arr1.join('|')+')', 'gi'); output = output.replace(regex, "<b>$1</b>"); // the following line is for debug purposes only. I've added it // to better display what's happening just for the Stackoverflow // code snippet editor. document.body.innerHTML = output; 

 b { background: yellow; font-weight: normal; } 

Edit:

Quick edit to include logic that ensures "consectrtur" is matched, but "consectetur s " is not. It just needs a simple look ahead of (?!\\\\w) and a "look behind" (not a real look behind because javascript doesn't support it) of (\\\\W+|^) ensuring the matched term is not surrounded by word characters, and thus not part of a different word.

 var output = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse consecteturs cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"; var arr1 = ['eiusmod tempor', 'consectetur', 'orem', 'laborum']; var regex = new RegExp('(\\\\W+|^)('+arr1.join('|')+')(?!\\\\w)', 'gi'); output = output.replace(regex, "$1<b>$2</b>"); // the following line is for debug purposes only. I've added it // to better display what's happening just for the Stackoverflow // code snippet editor. document.body.innerHTML = output; 

 b { background: yellow; font-weight: normal; } 

Answer 2

You can wrap the words you want highlighted with a <span> tag then add a class or inline styling to the tag for your highlight color. This would require that you identify the words you want highlighted and add the opening tag before and closing tag after with a String.replace(word, tag + word + closing_tag) or something similar.

Answer 3

To wrap something in HTML using Javascript, you should be looking at Regex. For example:

str = str.replace(/(neoplasm)/ig, "<b>$1</b>");

To replace from an array, you could do something like connecting your strings with a join using the regex OR: | to generate a custom regex string, matching those words.

EDIT: Like Joseph just suggested, just one minut before me.