从所有元素中获取所有文本，替换某些预定的单词，仅 javascript

Question

我正在尝试在用户加载页面时检索文档或网页上的所有文本，我正在尝试在所有文本中搜索由 [name value] 数组定义的某些词，我正在尝试用相应的值替换搜索词的每个实例。

例子

我正在使用 chrome 扩展程序在页面加载时注入我的 js...

<document>
       <head>web page</head>
          <body>
             <p>paragraph of text. stack overflow is wonderful</p>
             <p>another paragraph of text. stack overflow is great</p>
             <p>third paragraph with nested list
                 <ol>
                    <li>stack overflow yay</li>
                    <li>stack overflow wow</li>
                 </ol>
                 <img alt"stack is fun"></img>
             </p>
           </body>

单词堆栈在许多上下文和标签中多次出现。我想使用名称值对搜索整个文档 [stack : snack, wonderful : excellent], 然后用新值替换原来的单词。页面应该用新词代替旧词刷新，所以堆栈的每个实例现在都应该说零食，每个 wonderful 实例现在都应该说 excellent。

Answer 1

您可以简单地 replace body innerHTML 和 regex (g) 中的 global flag。

在代码片段中，我创建了 objects 的 array 以及 name 和 value，其中 name 将成为目标，value 是 name 的替代品。我遍历 array 并在 document.body.innerHTML 上执行 regex 和 global flag 以替换所有匹配的事件。

就是这样。

const words = [
  {
    "targetValues": ["stack", "sack", "stck"],
    "value": "snack"
  },
  {
    "targetValues": ["wonderful"],
    "value": "amazing"
  }
];

words.forEach(word => {
    word.targetValues.forEach(target => {
    console.log(target);
    let reg = new RegExp(target, "gi");
    document.body.innerHTML = document.body.innerHTML.replace(reg, word.value);
  })
})

<p>paragraph of text. sTacK overflow is wonderFul</p>
<p>another paragraph of text. stack overflow is great</p>
<p>third paragraph with nested list
  <ol>
    <li>stack overflow yay</li>
    <li>stack overflow wow</li>
  </ol>
  <img alt="stack is fun" />
  sack
</p>
<p>sack misspelled</p>
<p>stck misspelled again</p>
<p>sTcK misspelled again and with some capital characters</p>

有关 RegExp 的更多信息可在此处找到：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

编辑：

如果您不想在 name 中传递一个值，您可以传递 array 个值，因此您必须循环遍历 name 和 array将每个值替换为 value；另外，是的，您可以通过使用正则表达式 (i) 指定 case insensitive flag 来实现。

看看代码片段，我已经更新了。

此外，我建议您查看此 link：https://javascript.info/regexp-introduction（这也解释了 regex flags）

以获取更多信息

从所有元素中获取所有文本，替换某些预定的单词，仅 javascript

get all text from all elements, replace certain predetermined words, javascript only

javascript

search

text

replace

find