How to Update All Instances of a String in the Visible Text of a Webpage?

Question

I have to add a registered trademark symbol to all references to a brand, let's call it "SomeBrand" on a client site. Currently I have this:

function updateSomeBrand(){
  var elements = document.getElementsByTagName('*');
  for(el in elements){
    if(["SCRIPT", "META", "HEAD", "STYLE", "IFRAME", "NOSCRIPT", "IMG"].indexOf(elements[el].tagName) < 0){
      if(elements[el].innerText != undefined && elements[el].innerText.indexOf("SomeBrand") > 0){
        console.log(elements[el].innerText);
        console.log(elements[el].innerText.indexOf("SomeBrand"));
        elements[el].innerHTML = elements[el].innerHTML.replace("SomeBrand", "SomeBrand®")
      }
    }
  }
}

But it adds extra ® symbols after all references to SomeBrand, in some cases it adds six or seven. I'm not sure yet why. Is there a better way to go about this? There are a lot of references on different product pages, so I'd like to add some JS to the product page template instead of manually updating them.

score 0 · Answer 1 · answered Jul 02 '19 at 19:01

You're calling .replace() in all elements, including container elements. That means that you first replace all of the HTML in the container, then replace it again for each child.

Instead, you should modify text nodes only. getElementsByTagName() equivalent for textNodes

How to Update All Instances of a String in the Visible Text of a Webpage?

1 Answers1