使用JavaScript查找和替換HTML中的單詞
[英]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>
2 個解決方案
解決方案1
2 2019-09-18 16:20:16
因此，使用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
1 2019-09-18 16:17:51
您可以按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>
使用JavaScript查找替換HTML
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.