Sometimes, we want to highlight all text occurrences in a HTML page with JavaScript.

In this article, we’ll look at how to highlight all text occurrences in a HTML page with JavaScript.

How to highlight all text occurrences in a HTML page with JavaScript?

To highlight all text occurrences in a HTML page with JavaScript, we can use the string replace method.

For instance, we write:

<div>
  foo bar foo baz
</div>

to add a div.

Then we write:

const div = document.querySelector('div')
div.innerHTML = div.innerHTML.replace(/foo/g, (match) => {
  return `<span style="background-color: yellow">${match}</span>`
})

to select the div with querySelector.

And then we add the highlight by using div.innerHTML to get the div’s HTML code.

Then we call replace with a regex to match all instances of 'foo' and a callback that returns 'foo' wrapped with a span with the background color style set to yellow.

Finally, we assign the returned HTML string to div.innerHTML.

As a result, we should see all instances of foo highlighted in yellow on the screen.

Conclusion

To highlight all text occurrences in a HTML page with JavaScript, we can use the string replace method.