[英]Find and replace words in HTML using JavaScript
我有一些HTML列出了单词行,每一行都附加到一个类上。
我还有一个脚本函数,可对出现的“五”一词进行全局查找并替换HTML,并替换为“零”。
但是,问题在于,对于class="second"
每次出现,我只想用“零”替换“五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>
因此,使用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>
您可以按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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.