The following function in JavaScript
adds to each matching word a <mark>
tag in the document’s body.
var words = ["apple", "banana", "carrot", "pear"]; for (var i=0; i < words.length; i++) { var replace = new RegExp(words[i],"g"); var page = document.body.innerHTML; var newPage = page.replace(replace, `<mark>${words[i]}</mark>`); document.body.innerHTML = newPage; }
This way, it highlights a word within the <body>
if it’s an element within the array words
.
The issue I have is that the document.body.innerHTML
is replaced at every iteration. Do you know how I can replace the matching words in the page limiting the numbers of document.body.innerHTML = newPage
to 1?
Thanks in advance for your replies!
Answer
Get innerHTML before loop and set innerHTML after loo. you can use replaceAll to change all matching word
var words = ["apple", "banana", "carrot", "pear"]; var page = document.body.innerHTML; words.forEach((word) => { page = page.replaceAll(word, `<mark>${word}</mark>`); }); document.body.innerHTML = page;
<div> apple abc banana cd apple </div>