使用 JavaScript 查找和替换 HTML 中的单词
我有一些列出单词行的 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>
子衿沉夜2回答
-
慕哥6287543
因此，使用 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 arrowfunction 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> -
30秒到达战场
您可以通过 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>
随时随地看视频慕课网APP
相关分类
JavaScript