highlight.js

// from https://www.nsftools.com/misc/SearchAndHighlight.htm

function doHighlight(bodyText, searchTerm, highlightStartTag, highlightEndTag) {
  // the highlightStartTag and highlightEndTag parameters are optional
  if (!highlightStartTag || !highlightEndTag) {
    highlightStartTag = "<span style='color:blue; background-color:yellow;'>";
    highlightEndTag = "</span>";
  }

  // find all occurences of the search term in the given text,
  // and add some "highlight" tags to them (we're not using a
  // regular expression search, because we want to filter out
  // matches that occur within HTML tags and script blocks, so
  // we have to do a little extra validation)
  let newText = "";
  let i = -1;
  let lcSearchTerm = searchTerm.toLowerCase();
  let lcBodyText = bodyText.toLowerCase();

  while (bodyText.length > 0) {
    i = lcBodyText.indexOf(lcSearchTerm, i + 1);
    if (i < 0) {
      newText += bodyText;
      bodyText = "";
    } else {
      // skip anything inside an HTML tag
      if (bodyText.lastIndexOf(">", i) >= bodyText.lastIndexOf("<", i)) {
        // skip anything inside a <script> block
        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;
}

/*
 * This is sort of a wrapper function to the doHighlight function.
 * It takes the searchText that you pass, optionally splits it into
 * separate words, and transforms the text on the current web page.
 * Only the "searchText" parameter is required; all other parameters
 * are optional and can be omitted.
 */
function highlightSearchTerms(searchText, treatAsPhrase, warnOnFailure, highlightStartTag, highlightEndTag) {
  // if the treatAsPhrase parameter is true, then we should search for
  // the entire phrase that was entered; otherwise, we will split the
  // search string so that each word is searched for and highlighted
  // individually
  if (treatAsPhrase) {
    searchArray = [searchText];
  } else {
    searchArray = searchText.split(" ");
  }

  if (!document.body || typeof document.body.innerHTML == "undefined") {
    return false;
  }

  let bodyText = document.body.innerHTML;
  for (let i = 0; i < searchArray.length; i++) {
    bodyText = doHighlight(
      bodyText,
      searchArray[i],
      highlightStartTag,
      highlightEndTag
    );
  }

  document.body.innerHTML = bodyText;
  return true;
}


highlightSearchTerms("the")