Capture the search phrase (the word you are searching or looking for). Capture the search area (the table or paragraph you are searching into). Look into the search area to see if you can find the search phrase. Once it exists, replace with a string that has an HTML element tag surrounding it.
Replace the searched word with the same word but wrapped in a span that has certain CSS class. Use CSS to customize the look.
var toLookInto = $("#toLookInto").html(); $("#toFind").on("keyup", function() { var toFind = $("#toFind").val(); var regx = new RegExp(toFind, "g"); var newstring = toLookInto.replace(regx, '<span class="highlight">' + toFind + '</span>') $("#toLookInto").html(newstring) });.highlight { color: red; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <p id="toLookInto"> dummy text foo bar cat mewo dummy text foo bar cat mewo dummy text foo something odd bar cat mewo dummy text foo bar cat mewo </p> <br> <input type "text" id="toFind" /> <button<lable>The id="buttonclick">text Findfield <will be triggered on every key pressed</button>label>