使用 JavaScript 查找和替换 HTML 中的单词答案

【问题标题】：Find and replace words in HTML using JavaScript使用 JavaScript 查找和替换 HTML 中的单词
【发布时间】：2019-09-19 00:20:16
【问题描述】：

我有一些 HTML 列出了单词的行，每一行都附加到一个类。

我还有一个脚本函数，它对每次出现的单词“Five”进行全局查找和替换 HTML，将其替换为单词“Zero”。

但是，问题是我只想在每次出现class="second" 时将“五”替换为“零”。

问题

如何循环浏览 HTML 中的每一行，仅为特定类进行单词替换，例如使用 getElementsByClassName() 方法？

代码

实际中的单词替换示例 - https://jsfiddle.net/yb0sLhqp/

<html>
<body>

<p class="first">One Two Three Four Five</p>
<p class="second">Three Four Five Six Seven</p>
<p class="third">Five Six Seven Eight Nine</p>
<p class="second">Three Four Five Six Seven</p>
<p class="first">One Two Three Four Five</p>
<p class="second">Three Four Five Six Seven</p>
<p class="third">Five Six Seven Eight Nine</p>
<p class="second">Three Four Five Six Seven</p>
<p class="first">One Two Three Four Five</p>

<button onclick="myFunction()">Replace</button>

<script>

function myFunction() {
document.body.innerHTML = document.body.innerHTML.replace(/Five/g, 'Zero');
}

</script>

</body>
</html>

【问题讨论】：

所以在循环遍历集合时选择元素并替换元素文本。

标签： javascript html css optimization getelementsbyclassname

【解决方案1】：

所以用 querySelectorAll 选择所有元素，循环，替换文本。

function myFunction() {
  document.querySelectorAll(".second")  // select the elements
    .forEach(elem => // loop over
      elem.textContent = elem.textContent.replace(/Five/g, 'Zero') //replace the text
    )
}

myFunction()

/* without the fat arrow
function myFunction() {
  document.querySelectorAll(".second")  // select the elements
    .forEach(function(elem) { // loop over
      elem.textContent = elem.textContent.replace(/Five/g, 'Zero') //replace the text
    })
}
*/

<p class="first">One Two Three Four Five</p>
<p class="second">Three Four Five Six Seven</p>
<p class="third">Five Six Seven Eight Nine</p>
<p class="second">Three Four Five Six Seven</p>
<p class="first">One Two Three Four Five</p>
<p class="second">Three Four Five Six Seven</p>
<p class="third">Five Six Seven Eight Nine</p>
<p class="second">Three Four Five Six Seven</p>
<p class="first">One Two Three Four Five</p>

<button onclick="myFunction()">Replace</button>

【讨论】：

【解决方案2】：

你可以通过className选择元素，然后替换值

function myFunction() {
  let elements = document.getElementsByClassName("second");
  [...elements].forEach(element => {
    element.innerText = element.innerText.replace(/Five/g, 'Zero')
  })
}

<html>
<body>
  <p class="first">One Two Three Four Five</p>
  <p class="second">Three Four Five Six Seven</p>
  <p class="third">Five Six Seven Eight Nine</p>
  <p class="second">Three Four Five Six Seven</p>
  <p class="first">One Two Three Four Five</p>
  <p class="second">Three Four Five Six Seven</p>
  <p class="third">Five Six Seven Eight Nine</p>
  <p class="second">Three Four Five Six Seven</p>
  <p class="first">One Two Three Four Five</p>
  <button onclick="myFunction()">Replace</button>
</body>
</html>

【讨论】：