You can use the jquery highlight effect.
But if you are interested in raw javascript code, take a look at what I got
Simply copy paste into an HTML, open the file and click “highlight” – this should highlight the word “fox”. Performance wise I think this would do for small text and a single repetition (like you specified)
function highlight(text) {
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0) {
innerHTML = innerHTML.substring(0,index) + "<span class="highlight">" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
inputText.innerHTML = innerHTML;
}
}
.highlight {
background-color: yellow;
}
<button onclick="highlight('fox')">Highlight</button>
<div id="inputText">
The fox went over the fence
</div>
Edits:
Using replace
I see this answer gained some popularity, I thought I might add on it.
You can also easily use replace
"the fox jumped over the fence".replace(/fox/,"<span>fox</span>");
Or for multiple occurrences (not relevant for the question, but was asked in comments) you simply add global
on the replace regular expression.
"the fox jumped over the other fox".replace(/fox/g,"<span>fox</span>");
Hope this helps to the intrigued commenters.
Replacing the HTML to the entire web-page
to replace the HTML for an entire web-page, you should refer to innerHTML
of the document’s body.
document.body.innerHTML