JavaScript: loop through DOM tree and replace text?

Question

I need to use JavaScript to loop through the DOM tree of a webpage and replace every instance of the word 'hipster' with a different word UNLESS it is part of a link or image src. Example, if 'hipster' appears in a paragraph, it should be replaced.

But if it's in the src="" url for an image, that should not be replaced because if it replaces that word in a url, the url obviously breaks.

I've been having a really hard time implementing this. Here's one thing I tried:

var items = document.getElementsByTagName("*");
  var i = 0;
  for (i = 0; i < items.length; i++){
     if(i.nodeType == 3){
        i.html().replace(/hipster/gi, 'James Montour');
     }
     else{
       //do nothing for now
     }
  }

Do you want to check your question? It doesn't make sense. "So if 'hipster' appears in a paragraph, for example, it should be replaced. But if it's in the src url for an image, that should be replaced." Didn't you mean "shouldn't" in one of your cases? — spender
– spender, Commented Aug 30, 2014 at 2:00
Same again, I'm afraid. Now your 1st & 2nd paras say the opposite of each other. — spender
– spender, Commented Aug 30, 2014 at 2:06

Ry- · Accepted Answer · 2014-08-30 02:05:38Z

3

You’re close, but:

document.getElementsByTagName('*') will never return text nodes; it gets elements only (and comment nodes in old versions of IE)
Text nodes don’t have an html() method
replace doesn’t modify strings in place

With that in mind, you can get every child of every element, check their types, read their nodeValues, and, if appropriate, replace the entire node:

var elements = document.getElementsByTagName('*');

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];

    for (var j = 0; j < element.childNodes.length; j++) {
        var node = element.childNodes[j];

        if (node.nodeType === 3) {
            var text = node.nodeValue;
            var replacedText = text.replace(/hipster/gi, 'James Montour');

            if (replacedText !== text) {
                element.replaceChild(document.createTextNode(replacedText), node);
            }
        }
    }
}

Try it out on this page!

answered Aug 30, 2014 at 2:05

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

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

1 Comment

Tom Maxwell Over a year ago

Worked like a charm! I had never worked with nodeType before so got kind of lost there.

ndf · Accepted Answer · 2014-10-28 20:20:07Z

-1

To use variables instead of 'hipster' replace:

var replacedText = text.replace(/hipster/gi, 'James Montour');

with these lines:

var needle = 'hipster';
var replacement = 'James Montour';
var regex = new RegExp(needle, "gi");
var replacedText = text.replace(regex, replacement);

answered Oct 28, 2014 at 20:20

ndf

11 silver badge3 bronze badges

Collectives™ on Stack Overflow

JavaScript: loop through DOM tree and replace text?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related