JSFiddle - React, Tailwind, and code Playground

HTML

<input name="text-search" id="text-search" type="text" size="30" maxlength="30">
<input name="searchit" type="button" value="Search" onClick="highlight(true)">
 
<input name="text-replace" id="text-replace" type="text" size="30" maxlength="30">
<input name="replaceit" type="button" value="Replace" onClick="replace()">

<input name="nope" type="button" value="NOPE IT" onClick="highlight(false)">
    

<div id="mydata">
<p>Demo he new edition of KnowlEdge K12 enables your school with flexibility by wholly automating their administrative and academic processes. With IncTech’s solution for K12 schools, you can. We give you an internal infrastructure so you can share school and student information. </p>
</div>

CSS

#mydata span{
    background-color:#FF9;
    color:#555;
}

div {
    padding: 10px; 
}

JavaScript

function highlight(active) {	
    var e = document.getElementById("mydata").innerHTML;
    if (active) {
    	var text = document.getElementById("text-search").value;
    	var query = new RegExp("(\\b" + text + "\\b)", "gim");
      var newe = enew.replace(query, "<span>$1</span>");
    	document.getElementById("mydata").innerHTML = newe;
    } else {
    	var enew = e.replace(/(<span>|<\/span>)/igm, "");
    	document.getElementById("mydata").innerHTML = enew;
    }
}

function replace(){
    var tx=document.getElementById('text-search').value;
    var ne=document.getElementById('text-replace').value;
    var re =new RegExp(tx,"g");
    var body1 = document.getElementById('mydata').innerHTML;
    document.getElementById('mydata').innerHTML =body1.replace(re, ne);
   
        }
        
        function nope() {
    var e = document.getElementById("mydata").innerHTML;
    var enew = e.replace(/(<span>|<\/span>)/igm, "");
    document.getElementById("mydata").innerHTML = enew;

}