How to replace matching words within a page replacing the body.innerHTML only once?

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;
}

JavaScript
​x
 
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;

JavaScript
 
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>

JavaScript
 
<div> apple abc banana cd apple </div>

Advertisement

Answer