JSFiddle - React, Tailwind, and code Playground
HTML
<button onclick="highlight('fox')">Highlight</button>
<div id="inputText">The fox went over the fence</div>
CSS
.highlight {
background-color:yellow;
}
JavaScript
window.highlight = function(text) {
var inputText = document.getElementById("inputText");
var innerHTML1 = inputText.innerHTML;
var index = innerHTML1.indexOf(text);
if (index >= 0) {
innerHTML1 = innerHTML1.substring(0, index) + "<span class='highlight'>" + "Fynn the fox" + "</span>" + innerHTML1.substring(index + text.length);
inputText.innerHTML = innerHTML1;
}
}