CODEWITHSUNDEEP
javascriptjquery
Tom Maxwell
Tom Maxwell

Reputation: 9573

JavaScript: loop through DOM tree and replace text?

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
     }
  }

Upvotes: 0

Views: 2080

Answers (2)

ndf
ndf

Reputation: 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);

Upvotes: -1

Ry-
Ry-

Reputation: 224922

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!

Upvotes: 3

Related Questions