Find and replace words in HTML using JavaScript
Question
I have some HTML that lists lines of words, with each line attached to a class.
I also have a script function that does a global find and replace of the HTML for every occurrence of the word “Five”, replacing it with the word “Zero”.
However, the issue is that I only want to replace “Five” with “Zero” for every occurrence where class="second" .
Question
How do I cycle through each line in the HTML making word replacements for only a specific class, for instance using the getElementsByClassName() method?
Code
Example of the word replacement in action - 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 answers
solution1
2 2019-09-18 16:20:16
So select all the elements with querySelectorAll, loop over, and replace the text.
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>
solution2
1 2019-09-18 16:17:51
You can select element by className and then replace value
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.