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>

so select the elements and replace the elements text as you loop over the collection. — epascarello
– epascarello, Commented Sep 18, 2019 at 16:16

epascarello · Accepted Answer · 2019-09-18 16:20:16Z

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>

Code Maniac · Accepted Answer · 2019-09-18 16:17:51Z

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>

Collectives™ on Stack Overflow

Find and replace words in HTML using JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related