How do you highlight all the words on the page that match an array of words?

Question

I want to find all the words on my webpage that match any of the words in a Javascript array, and highlight them (wrap them in special span tags). What's the easiest way to do this? I use jquery.

possible duplicate of [: How to highlight certain words with jQuery](http://stackoverflow.com/questions/1230714/how-to-highlight-certain-words-with-jquery) — Diodeus - James MacFarlane, Aug 08 '11 at 19:20
You can have a look at the plugin I wrote: https://github.com/fkling/jquery_playground/blob/master/jquery_text_highlight.js — Felix Kling, Aug 08 '11 at 19:21
Not a duplicate. Most other questions relate to how to match a given case, not an array. — boulder_ruby, Aug 14 '12 at 04:06

score 3 · Answer 1 · answered Aug 08 '11 at 19:23

Try this these methods

highlightWord(["text1", "text2"]);


function highlightWord(searchArray, container)
{
  var bodyText;
  if(container)
     bodyText = container.html();
  else
     bodyText = $(document.body).html();

  container = container || $(document.body);

  for (var i = 0; i < searchArray.length; i++) {
    bodyText = doHighlight(bodyText, searchArray[i]);
  }

  container.html(bodyText);

  return true;
}

function doHighlight(bodyText, searchTerm) 
{

    var highlightStartTag = "<span style='color:blue; background-color:yellow;'>";
    var highlightEndTag = "</span>";

  var newText = "";
  var i = -1;
  var lcSearchTerm = searchTerm.toLowerCase();
  var lcBodyText = bodyText.toLowerCase();

  while (bodyText.length > 0) {
    i = lcBodyText.indexOf(lcSearchTerm, i+1);

    if (i < 0) {
      newText += bodyText;
      bodyText = "";
    } else {
      if (bodyText.lastIndexOf(">", i) >= bodyText.lastIndexOf("<", i)) {
        if (lcBodyText.lastIndexOf("/script>", i) >= lcBodyText.lastIndexOf("<script", i)) {
          newText += bodyText.substring(0, i) + highlightStartTag + bodyText.substr(i, searchTerm.length) + highlightEndTag;

          bodyText = bodyText.substr(i + searchTerm.length);

          lcBodyText = bodyText.toLowerCase();

          i = -1;

        }

      }

    }

  }

  return newText;
}

Yes, instead of bodyText we can specify the container in which we want to hightlight the text. — ShankarSangoli, Aug 08 '11 at 19:25
@dan - Please check my edited answer, now it takes the container in which to search for the words. — ShankarSangoli, Aug 08 '11 at 19:29
thanks. i like the shorter answer above because it's short, but i'm voting your answer up for the time you took to help me out. — dan, Aug 11 '11 at 00:25

score 3 · Accepted Answer · answered Aug 08 '11 at 19:30

3

Not perfect, but simple and may work:

var regex = /(Hello|Goodbye)/g;

$('*').each(function() {
    var $this = $(this);
    var text = $this.text();
    if (regex.test(text)) {
        $this.html(
            $this.html().replace(regex, '<span>$1</span>')
        );
    }
});

http://jsfiddle.net/pdWAn/

answered Aug 08 '11 at 19:30

Alex Wayne

178,991
47
309
337

1

Awesome answer. I used a modified regex to: 1. Ignore case "i" at the end. 2. Only match the word if it is a separate word. For example, searching for "to" will be found if the text contains the words "to" and "history". I get around this by adding "\b" before and after each word. Full regex as an example: `var wordsToReplace = /(\bof\b|\bour\b|\bfrom\b|\bto\b|\bat\b)/gi;` Ugly, but it gets the job done. – Damon Bauer May 16 '13 at 13:04

How do you highlight all the words on the page that match an array of words?

2 Answers2

Linked