0

我有一些列出单词行的 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>
4

2 回答 2

2

因此，使用 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>

于 2019-09-18T16:20:16.870 回答
1

您可以通过 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>

于 2019-09-18T16:17:51.677 回答