JSFiddle - React, Tailwind, and code Playground
HTML
<input id="txtSearch" type="text" class="ProjectSearch" value="trend Micro" />
<input id="btnSearch" type="submit" value="Find" class="RunSearch" />
<div class="ProjectTaskGrid">Renew Trend Worry-Free Business Security license that will expire in 60 days
<br/>Activate trend and confirm renewal upon electronic delivery notification from Trend Micro</div>
CSS
div {
padding: 5px;
border: solid 1px #CCC;
}
.search-found {
background-color: #F7DE00;
padding-left: 3px;
padding-right: 3px;
color: black !important;
}
JavaScript
$(document).ready(function () {
$(".RunSearch").click(function (e) {
if ($(".ProjectSearch").val().length > 0) {
var searchedText = $(".ProjectSearch").val();
var wordList = searchedText.split(" ");
$.each(wordList, function (i, word) {
$(".ProjectTaskGrid:contains('" + word + "')").each(function (i, element) {
var rgxp = new RegExp(word, "gi");
var repl = '<span class="search-found">$&</span>';
element.innerHTML = element.innerHTML.replace(rgxp, repl);
});
});
}
});
});