Highlight text on keyup event

jQuery function to hightlight text on keyup event.

by Amy Ruddy

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <a class="navbar-brand" href="#">MySearch <span class='fas fa-search'></span></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">

    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" id="search">
    </form>
  </div>
</nav>
<div class='container py-2'>
  <h1>jQuery Search Function</h1>
  <p>Highlights text input</p>
  <hr>
  <p>Bacon ipsum dolor amet bresaola pancetta alcatra strip steak. Meatball turducken leberkas pork belly turkey. Rump fatback pork loin hamburger alcatra brisket, leberkas cupim buffalo jerky beef. Pork loin leberkas...

CSS

.navbar-dark .navbar-brand {
  color: #0084ff !important;
}

.form-control {
  border: 1px solid #0084ff !important;
}

span.highlight {
  background-color: #0084ff6b !important;
}

.form-control:focus {
  background-color: #ddebf9 !important;
}

JavaScript

var p = $('p');
$('input').keyup(function() {
  var input_value = this.value.trim();
  p.find('span.highlight').contents().unwrap();
  if (input_value) {
    var my_reg_ex = new RegExp('(' + input_value.trim().split(/\s+/).join('|') + ')', "");
    p.html(function(i, html) {
      return html.replace(my_reg_ex, '<span class="highlight"></span>')
    });
  }
})