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

【问题标题】：How to replace matching words within a page replacing the body.innerHTML only once?如何替换页面中的匹配词只替换 body.innerHTML 一次？
【发布时间】：2022-01-17 12:06:26
【问题描述】：

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的匹配词吗？

提前感谢您的回复！

【问题讨论】：

在this question ..上应用其中一个答案？

标签： javascript arrays for-loop replace

【解决方案1】：

在循环之前获取 innerHTML 并在 loo 之后设置 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;

&lt;div&gt; apple abc banana cd apple &lt;/div&gt;

【讨论】：

谢谢！它有效。
这将吃掉所有的事件监听器，如果它们附加了 JS。设置 innerHTML 总是一个坏主意，
@Teemu 你能提出一个替代方案吗？
@d_z90 我已在对问题的评论中链接到工作解决方案。

【解决方案2】：

循环前读取字符串，循环内修改，循环后更改文档正文。

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"

【讨论】：