How can I make my Javascript code select all 'b' tags on a page instead of only the first one?

Question

We have a very large website that is quite old and has a lot of 'b' tags. My boss wants to change them to 'strong' tags but this will require a lot of time to change manually so she was hoping we could change it with some code.

I had a nice bit of JQuery code that worked (intermittently), but I couldn't get it to work on the site as it uses JQuery 1.9.1 and cannot be upgraded.

I then found this piece of Javascript which does what I need but only works on the first 'b' tag on the page and all others stay as 'b' tags. I don't know enough about Javascript selectors to change the firstChild selector.

<script>
  function replaceElement(source, newType) {
    // Create the document fragment
    const frag = document.createDocumentFragment();
    // Fill it with what's in the source element
    while (source.firstChild) {
      frag.appendChild(source.firstChild);
    }
    // Create the new element
    const newElem = document.createElement(newType);
    // Empty the document fragment into it
    newElem.appendChild(frag);
    // Replace the source element with the new element on the page
    source.parentNode.replaceChild(newElem, source);
  }

  // Replace the <b> with a <div>
  replaceElement(document.querySelector('b'), 'strong');
</script>

Answer 1

You might use querySelectorAll :

Array.from(document.querySelectorAll('b')).forEach(e=>{
    replaceElement(e, 'strong');
});

But this is really a xy question . You really should do the change server side, for example by using some search/replace (learn to use your code editor). You're adding to the code debt here.

Note also that there's no obvious reason to prefer strong over b in HTML5.

Answer 2

Use getElementsByTagName() . It's more efficient than querySelectorAll because it doesn't have to parse selectors, and it describes better what you are really trying to do - get elements by tag name.

var elements = document.getElementsByTagName("b");
replaceElement(elements[0], "strong");
replaceElement(elements[1], "strong");
replaceElement(elements[2], "strong");

You can also iterate over this collection by using Array.from() .

Answer 3

You would be better off finding the source of the <b> tags and changing them there as Denys has mentioned.

Updating the DOM would have little benefit and would cause performance issues when there are many tags on a page.

Does this system use a CMS or database to store the content? I would look to use something like these 2 SQL queries to replace them across the site:

update content_table set content_column = replace(content_column, '<b>','<strong>');

update content_table set content_column = replace(content_column, '</b>','</strong>');

Answer 4

 const bs=document.getElementsByTagName('b') for(b of bs){ b.style.border="3px solid black" }

 <b>asdf</b> <b>asdf</b>