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!
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>Read the string before the loop, modify it in the loop, and change the document body after the loop.
const words = ["apple", "banana", "carrot", "pear"];
let page = document.body.innerHTML;
for (const word of words) {
page = page.replaceAll(word, `<mark>${word}</mark>`);
}
document.body.innerHTML = page;"apple", "banana", "carrot", "pear"Or you can use reduce:
const words = ["apple", "banana", "carrot", "pear"];
document.body.innerHTML = words.reduce((page, word) => page.replaceAll(word, `<mark>${word}</mark>`), document.body.innerHTML);"apple", "banana", "carrot", "pear"