mundry · July 29, 2022 13:57
diff --git a/highlight.css b/highlight.css
 #hits-count {
  font-size: .65em;
  color: #888888;
 }
 .match {
  color: #FF6347;
 }
diff --git a/highlight.js b/highlight.js
 (function(){
  var
    query = "",
    content = document.getElementById('content'),
    text = content.innerHTML,
    searchfield = document.getElementById('searchfield'),
    hitsCount = document.getElementById('hits-count'),
    hits = 0,

    replaceAndCountMatches = function(str) {
      hits++;
      return '<span class="match">' + str + '</span>';
    },

    escapeRegex = function(regex) {
      return regex.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
    },

    highlight = function(keyEvent) {
      query = searchfield.value;
      if (query.length > 0) {
        var pattern = new RegExp(escapeRegex(query), "gi");
        hits = 0;
        content.innerHTML = text.replace(pattern, replaceAndCountMatches);
        hitsCount.innerHTML = hits + ' Hit' + (hits === 1 ? '' : 's');
        searchfield.style.backgroundColor = hits === 0 ? 'rgba(255, 99, 71, 0.75)' : 'rgba(144, 238, 144, 0.75)';
      } else {
        content.innerHTML = text;
        hitsCount.innerHTML = '';
        searchfield.style.removeProperty('background-color');
      }
    };

  if (searchfield.addEventListener) {
    searchfield.addEventListener("keyup", highlight);
  } else if (searchfield.attachEvent) { // < IE9 support
    searchfield.attachEvent("onkeyup", highlight);
  }
 })();
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html class="no-js">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
    <link rel="stylesheet" href="highlight.css" type="text/css">
    <style>
      body {
        font-family: sans-serif;
        color: 333;
        width: 800px;
        margin: 10px auto 0;
        font-size: 1.3em;
      }
    </style>
  </head>

  <!--[if lt IE 7]>      <body class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  <!--[if IE 7]>         <body class="lt-ie9 lt-ie8"> <![endif]-->
  <!--[if IE 8]>         <body class="lt-ie9"> <![endif]-->
  <!--[if gt IE 8]><!--> <body> <!--<![endif]-->
    <input type="text" id="searchfield"> <span id="hits-count"></span>
    <p id="content">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
      odio. Quisque volutpat mattis eros. Nullam malesuada erat ut
      turpis. Suspendisse urna nibh, viverra non, semper suscipit,
      posuere a, pede. Donec nec justo eget felis facilisis fermentum.
      Aliquam porttitor mauris sit amet orci. Aenean dignissim
      pellentesque felis. Morbi in sem quis dui placerat ornare.
      Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
      diam. Sed arcu. Cras consequat. Praesent dapibus, neque id cursus
      faucibus, tortor neque egestas augue, eu vulputate magna eros eu
      erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
      porttitor, facilisis luctus, metus. Phasellus ultrices nulla quis
      nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
      tristique cursus. Nam nulla quam, gravida non, commodo a, sodales
      sit amet, nisi. Pellentesque fermentum dolor. Aliquam quam lectus,
      facilisis auctor, ultrices ut, elementum vulputate, nunc. Sed
      adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis
      vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse
      commodo ullamcorper magna.
    </p>


    <script src="highlight.js"></script>
  </body>
 </html>
	#hits-count {
	font-size: .65em;
	color: #888888;
	}
	.match {
	color: #FF6347;
	}
	(function(){
	var
	query = "",
	content = document.getElementById('content'),
	text = content.innerHTML,
	searchfield = document.getElementById('searchfield'),
	hitsCount = document.getElementById('hits-count'),
	hits = 0,

	replaceAndCountMatches = function(str) {
	hits++;
	return '<span class="match">' + str + '</span>';
	},

	escapeRegex = function(regex) {
	return regex.replace(/([.*+?^=!:${}()\|\[\]\/\\])/g, "\\$1");
	},

	highlight = function(keyEvent) {
	query = searchfield.value;
	if (query.length > 0) {
	var pattern = new RegExp(escapeRegex(query), "gi");
	hits = 0;
	content.innerHTML = text.replace(pattern, replaceAndCountMatches);
	hitsCount.innerHTML = hits + ' Hit' + (hits === 1 ? '' : 's');
	searchfield.style.backgroundColor = hits === 0 ? 'rgba(255, 99, 71, 0.75)' : 'rgba(144, 238, 144, 0.75)';
	} else {
	content.innerHTML = text;
	hitsCount.innerHTML = '';
	searchfield.style.removeProperty('background-color');
	}
	};

	if (searchfield.addEventListener) {
	searchfield.addEventListener("keyup", highlight);
	} else if (searchfield.attachEvent) { // < IE9 support
	searchfield.attachEvent("onkeyup", highlight);
	}
	})();
	<!DOCTYPE html>
	<html class="no-js">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
	<link rel="stylesheet" href="highlight.css" type="text/css">
	<style>
	body {
	font-family: sans-serif;
	color: 333;
	width: 800px;
	margin: 10px auto 0;
	font-size: 1.3em;
	}
	</style>
	</head>

	<!--[if lt IE 7]> <body class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	<!--[if IE 7]> <body class="lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <body class="lt-ie9"> <![endif]-->
	<!--[if gt IE 8]><!--> <body> <!--<![endif]-->
	<input type="text" id="searchfield"> <span id="hits-count"></span>
	<p id="content">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
	odio. Quisque volutpat mattis eros. Nullam malesuada erat ut
	turpis. Suspendisse urna nibh, viverra non, semper suscipit,
	posuere a, pede. Donec nec justo eget felis facilisis fermentum.
	Aliquam porttitor mauris sit amet orci. Aenean dignissim
	pellentesque felis. Morbi in sem quis dui placerat ornare.
	Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
	diam. Sed arcu. Cras consequat. Praesent dapibus, neque id cursus
	faucibus, tortor neque egestas augue, eu vulputate magna eros eu
	erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
	porttitor, facilisis luctus, metus. Phasellus ultrices nulla quis
	nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
	tristique cursus. Nam nulla quam, gravida non, commodo a, sodales
	sit amet, nisi. Pellentesque fermentum dolor. Aliquam quam lectus,
	facilisis auctor, ultrices ut, elementum vulputate, nunc. Sed
	adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis
	vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse
	commodo ullamcorper magna.
	</p>


	<script src="highlight.js"></script>
	</body>
	</html>