How to find and replace a string in HTML DOM element using javascript

Question

I've tried to replace occurences of string "blue" with "red" in the document using DOM methods. However, I have not got the desired result.

Here's the code I've tried:

<html>
  <body>
    <p>Click the button to replace "blue" with "red" in the paragraph below:</p>
    <div id="main">
      <p>Mr Blue has a blue house and a blue car.</p>
      <p>Mr Blue has a blue house and a blue car.</p>
    </div>
    <button onclick="myFunction()">Try it</button>
    <script>
      function myFunction() {
        var str = document.getElementById("main");
        var x = str.document.getElementsByTagName("p");
        var res = x.innerHTML.replace(/blue/gi, "red");
        document.getElementsByTagName("p").innerHTML = res;
      }
    </script>
  </body>
</html>

getElementsByTagName returns a NodeList; you need to loop. — elclanrs
– elclanrs, Commented Jul 1, 2014 at 3:08
X is not an object, but it is an array of objects in the page. please use x[0].innerHTML. yes, it should be a loop. just gave an example how it can be updated... — Murtaza
– Murtaza, Commented Jul 1, 2014 at 3:08
i have used x[0].innerHTML still not working. I am a beginner to java script. Could you please explain what is a loop. — user3770743
– user3770743, Commented Jul 1, 2014 at 3:13

Mykola Semenov · Accepted Answer · 2021-05-09 15:09:29Z

5

There are multiple problems in your code.

To get ps from the div, you need to:

str.getElementsByTagName("p");  // and not str.document...

The above statement will return a collection and not a single element. So you need to loop over the collection and do your replace.

for (var i = 0; i < x.length; i++) {
    var res = x[i].innerHTML.replace(/blue/gi, "red");
    x[i].innerHTML = res;
}

Working example.

Update based on your comment ^{^{(what is a loop)}}: Please use the tutorials here to get started.

edited May 9, 2021 at 15:09

Mykola Semenov

8023 gold badges13 silver badges21 bronze badges

answered Jul 1, 2014 at 3:12

Nivas

18.4k4 gold badges65 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mykola Semenov · Accepted Answer · 2021-05-10 07:08:47Z

2

Another way to do it is to ignore the p tags altogether and just do the replacement on the div's innerHTML, like so:

function myFunction() {
    var str = document.getElementById("main");
    var inner = str.innerHTML;
    var res = inner.replace(/blue/gi, "red");
    str.innerHTML = res;
}
document.getElementsByTagName('button')[0].addEventListener('click', myFunction);

<div id="main">
  <p>Mr Blue has a blue house and a blue car.</p>
  <p>Mr Blue has a blue house and a blue car.</p>
</div>
<button>Try it</button>

edited May 10, 2021 at 7:08

Mykola Semenov

8023 gold badges13 silver badges21 bronze badges

answered Jul 1, 2014 at 3:15

Paul

36.4k12 gold badges98 silver badges124 bronze badges

Comments

elclanrs · Accepted Answer · 2014-07-02 22:07:33Z

getElementsByTagName returns a NodeList; you need to loop, using a for loop for example. But here's an alternative more re-usable approach that handles letter case:

// helper to convert NodeList to real array
var toArray = Array.call.bind([].slice)
// helper to query the DOM
var query = document.querySelectorAll.bind(document)

// uppercase first letter
var capitalize = function(x) {
  return x[0].toUpperCase() + x.slice(1)
}
// replace word and handle letter case
var replaceWord = function(word, replacement, str) {
  return str.replace(RegExp(word, 'gi'), function(m) {
    return /[A-Z]/.test(m) ? capitalize(replacement) : replacement
  })
}

// query all `p` tags and replace
toArray(query('p')).forEach(function(x) {
  x.textContent = replaceWord('blue', 'red', x.textContent)
})

Demo: http://jsbin.com/siveh/2/edit

Mykola Semenov · Accepted Answer · 2021-05-07 07:18:48Z

1

This should work for you:

var paras = document.getElementsByTagName('p');
for (var i = 0; i < paras.length; i++) {
    paras[i].textContent = paras[i].textContent.replace(/blue/g,'red');
};

edited May 7, 2021 at 7:18

Mykola Semenov

8023 gold badges13 silver badges21 bronze badges

answered Jul 1, 2014 at 3:17

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

Comments

Mykola Semenov · Accepted Answer · 2021-05-10 07:29:09Z

1

Couple of things:

You can't call .document on str, which is already an object.
You'll need to iterate through the array of p elements, which you were almost grabbing correctly. :)

Something like this:

function myFunction() {
    var str = document.getElementById("main");
    var x = str.getElementsByTagName("p");
    for (i = 0; i < x.length; i++) {
        var text = x[i].innerHTML;
        x[i].innerHTML = text.replace(/blue/gi, "red");
    }    
}

You can see a working example here: http://jsfiddle.net/a942G/

edited May 10, 2021 at 7:29

Mykola Semenov

8023 gold badges13 silver badges21 bronze badges

answered Jul 1, 2014 at 3:23

napo

8691 gold badge10 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to find and replace a string in HTML DOM element using javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related