JSFiddle - React, Tailwind, and code Playground

by Nimitt Shah

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search">

<p>
    <span>jQuery selektori</span> omogućavaju selektovanje i upravljanje HTML elementima. Selektori
    traže
    HTML elemente na osnovu njihovih identi೰katora, klasa, atributa,
    vrednosti atributa i dr. Bazirani su na CSS selektorima, ali postoje još neki. Svi
    selektori u <span>jQuery-ju</span> počinju sa znakom dolara i zagradama: $() .
</p>
<p id="paragraph">
    <span>Selektor $("*
        ")</span> selektuje sve elemente.
    <span>– Selektor $(this)</span> selektuje element na koji se odnosi funkcija koja ga obuhvata.
    <span>– Selektor $("p.intro")</span> selektuje sve p elemente sa atributom class="intro" .
    Uvod u Veb i Internet Tehnologije 133
    <span>– Selektor $("p:first")</span> selektuje prvi p element.
    <span>– Selektor $("ul li:first")</span> selektuje prvi li element prvog ul elementa.
    <span>– Selektor $("ul li:first child")</span> selektuje prvi li element svakog ul
    elementa.
    <span>– Selektor $("[href]")</span> selektuje sve elemente koje imaju postavljen atribut href . –
    Selektor $("a[target='_blank']") selektuje sve elemente a sa atributom target="_blank" . – Selektor
    $("a[target!='_blank']") selektuje sve elemente a koji nemaju atribut target="_blank" . – Selektor

</p>

CSS

p > span {
  color: red;
}

p#paragraph > span{
  color: orange;
}

span.highlight {
  font-weight: bold;
}

JavaScript

function searchHighlight(searchText) {
          if (searchText) {
          
              $("p").each(function() { 
                 $(this).find(".highlight").contents().unwrap();
                var content = $(this).html();
                
                var searchExpression = new RegExp(searchText, "ig"); // i for case insensitive, g search all matches
                var matches = content.match(searchExpression);
                if (matches) {
                  $(this).html(content.replace(searchExpression, function (match) {
                      return "<span class='highlight'>" + match + "</span>";
                  }));
                }
              });
          }else{
            $(".highlight").contents().unwrap();
            $(".highlight").remove();
          }
      }
$("#search").keyup(function () {
  searchHighlight($(this).val()); // Return the value inside the text box
});