JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<h2>Using JavaScript to Search For and Highlight Text on a Web Page</h2>
<hr>
<input type="text" class="input">
<p class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices purus eu posuere porta. Phasellus fringilla, nunc cursus ullamcorper tincidunt, quam augue gravida felis, at fringilla magna eros in nulla. Duis sagittis dui eu dignissim ultrices. Proin commodo in mi vitae sagittis. Pellentesque elementum est et neque dignissim tincidunt. Proin consectetur, dui vitae commodo convallis, massa massa eleifend libero, ut varius odio erat sed erat. Nullam pulvinar metus a porttitor fringilla. Nunc luctus ultrices tellus vel molestie. Aenean sollicitudin id arcu eget convallis.

Morbi auctor, ligula quis molestie accumsan, eros ante tristique erat, ut pulvinar massa mi id risus. Fusce in ante non libero facilisis fringilla. Vivamus nec nunc nec ligula pharetra lacinia id posuere velit. Sed ultricies sapien iaculis mi hendrerit, non vestibulum tortor volutpat. Donec ut eros ultricies, egestas odio in, tincidunt tortor. Aenean laoreet, lectus et rhoncus pharetra, sem lorem congue enim, tincidunt malesuada elit velit id orci. Sed tincidunt rutrum lacus, eget laoreet tellus volutpat ac.

Donec sollicitudin a purus ut laoreet. Mauris eu scelerisque nisi, sed posuere ante. Nulla ut dolor feugiat lacus viverra fringilla et ac quam. Cras luctus volutpat magna in interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean in est sed mauris maximus varius vel vel elit. Ut sit amet sem aliquet, tristique augue egestas, lacinia neque. Donec massa ante, aliquet semper pretium et, vehicula a tortor.

Fusce vitae mauris sed tortor venenatis dictum. Sed venenatis vehicula odio viverra faucibus. Fusce tortor erat, dictum a purus id, porta rutrum ligula. Proin vulputate mauris varius justo placerat semper. Vestibulum posuere nec ex a suscipit. In hac habitasse platea dictumst. Aliquam eu tristique...

CSS

body, input {
	margin: 20;
	font: .9em Verdana, 'Lucida Grande', Geneva, Lucida, sans-serif;
	}

JavaScript

var input = document.querySelector('.input'),
		content = document.querySelector('.content'),
    obj = {
    	text: content.innerHTML
    };

input.addEventListener('input', function () {
  //content.innerHTML = obj.text;
		var that = this;
    setTimeout(function() {
    	highlightSearchTerms(that.value);
    }, 1500);
}, false);


/*
 * This is the function that actually highlights a text string by
 * adding HTML tags before and after all occurrences of the search
 * term. You can pass your own tags if you'd like, or if the
 * highlightStartTag or highlightEndTag parameters are omitted or
 * are empty strings then the default <font> tags will be used.
 */
function doHighlight(bodyText, searchTerm, highlightStartTag, highlightEndTag) {
  // the highlightStartTag and highlightEndTag parameters are optional
  if ((!highlightStartTag) || (!highlightEndTag)) {
    highlightStartTag = "<font style='color:blue; background-color:yellow;'>";
    highlightEndTag = "</font>";
  }
  
  // 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)
  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 {
      // 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 +...