JSFiddle - React, Tailwind, and code Playground

by vstuart

HTML

<!--
BASED ON:

* https://stackoverflow.com/questions/59178447/search-and-highlight-text-on-page-while-keeping-html-structure
  
* https://jsfiddle.net/SchweizerSchoggi/6x3ak5d0/7/
-->

<head>
  <input placeholder="Filter these results" id="snippets_search_box" type="text" />
</head>

<body>
  <div>
    <div>
      <p class="vis">apples</p>
    </div>

    <p class="vis">bananas</p>
    <p class="vis">cakes</p>
    <p class="vis">donuts</p>
    <li class="vis">eggs</li>
    <li class="vis">fish</li>
    <li class="vis">grapes</li>

    <li class="vis" class="plain_snippet">ham</li>
    <li class="vis" class="plain_snippet" class="plain_snippet2">ice cream</li>
    <li class="vis" class="plain_snippet" class="plain_snippet2" id="apple">jello</li>
    <li class="vis" class="plain_snippet" class="plain_snippet2">kefir</li>
    <li class="vis" class="plain_snippet" class="plain_snippet2" class="plain_snippet3">lemon</li>

    <span class="vis">mango</span><br />

    <p class="vis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse efficitur pulvinar elementum.</p>

    <span class="vis">nachos</span><br />
    <span class="vis">oranges</span><br />
    <span class="vis">peaches</span><br />
    <span class="vis">quiche</span><br />

    <p class="vis">radishes</p>
    <p class="vis">soup</p>
    <p class="vis">tea</p>
  </div>
</body>

CSS

input {
      width: 50%;
      margin: 10px;
      padding: 5px;
      float: left;
      clear: left;
    }

    div {
      float: left;
      clear: left;
      //margin: 10px 10px;
    }

    p.vis {
      clear: left;
      color: magenta;
      margin: 0.0rem 0.0rem 0.0rem 0.0rem;
    }

    span.vis {
      clear: left;
      color: brown;
      margin: 0.0rem 0.0rem 1.0rem 0.0rem;
    }

    .bold {
      font-weight: 700;
    }

    table td {
      border: solid 1px #ccc;
      padding: 3px;
    }

JavaScript

$('#snippets_search_box').keyup(function() {

      const valThis = this.value;
      const length = this.value.length;
      $('.vis').each(function() {
        const text = $(this).text().replace(/<span class=\"vis\">/gi, "").replace(/<\/span>/gi, "");

        const position = text.indexOf(valThis.toLowerCase());

        if (position !== -1) {
          const matches = text.substring(position, (valThis.length + position));
          const regex = new RegExp(matches, 'ig');
          const highlighted = text.replace(regex, `<mark>${matches}</mark>`);
          $(this).html(highlighted).show();
        } else {
          $(this).text();
          $(this).hide();
        }
      });

    });