如何仅替换一次 body.innerHTML 替换页面中的匹配词？

Question

JavaScript 中的以下函数向文档正文中的每个匹配词添加一个 <mark> 标记。

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

这样，它会突出显示 <body> 中的一个词，如果它是数组 words 中的一个元素。

我遇到的问题是 document.body.innerHTML 在每次迭代时都会被替换。你知道我如何将document.body.innerHTML = newPage限制为1的页面中的匹配词替换吗？

预先感谢您的回复！

Answer 1

循环前读取字符串，循环中修改，循环后更改文件体

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"

或者您可以使用 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"

Answer 2

循环前获取innerHTML，循环后设置innerHTML。您可以使用 replaceAll 来更改所有匹配的单词

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>

如何仅替换一次 body.innerHTML 替换页面中的匹配词？

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

javascript

arrays

replace

for-loop