How to Highlight Text in Javascript?
Highlight Text Using the Mark Tag Method in JavaScript
<h1>
Search and Mark
</h1>
<input type="text" id="search"/>
<button onClick="search(id)" id="button">
Highlight
</button>
<p id="text">
Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web. JavaScript enables interactive web pages and is an essential part of web applications.
Most websites use it for client-side page behavior, and all major web browsers have a dedicated JavaScript engine to execute it. (This excerpt was taken from Wikipedia)
</p>Example
function search(e) {
let searched = document.getElementById("search").value.trim();
if (searched !== "") {
let text = document.getElementById("text").innerHTML;
let re = new RegExp(searched,"g"); // search for all instances
let newText = text.replace(re, `<mark>${searched}</mark>`);
document.getElementById("text").innerHTML = newText;
}
}