JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<input type="text" id="search" />

<element...

CSS

.override-opacity-50 {
    opacity:.5;
    color:red;
    font-weight:bold;
}

JavaScript

$(document).ready(function() {
    $('.fruits').each(function() {
        $(this).prop('data-orignal-text',$(this).text())
    });

    $('#search').keyup(function(){
        var phrase = $(this).val();
        $('.fruits').each(function() {
            var originalText = $(this).prop('data-orignal-text');
            $(this).html(originalText.replaceAll(phrase, '<span class="override-opacity-50">' + phrase +'</span>'));
        }); 
    });

});


String.prototype.replaceAll = function(find, replace) {
  return this.replace(new RegExp(find, 'g'), replace);
}