Checking an HTML page for duplicate IDs using JavaScript

A couple years back I wrote a post about Checking an HTML page for duplicate IDs using jQuery. A pretty useful tool when you need to ensure IDs on a page are unique. The downside to that code was that it required jQuery and the app I’m currently working with does not use jQuery, so I modifed the existing code to write a pure JavaScript solution that does the same thing.

var allElements = document.getElementsByTagName("*");
var allIds = {};
var found = false;
for (var i = 0, n = allElements.length; i < n; ++i) {
  var id = allElements[i].id;
  if (id) {
    if (allIds[id] === undefined) {
      allIds[id] = 1;
    } else {
      found = true;
      console.warn('Duplicate ID #' + id);
    }
  }
}
if (!found) {
  console.log('No duplicate IDs found');
}

All you need to do is create a new bookmark with the following as the URL

javascript: (function() {var allElements = document.getElementsByTagName('*');var allIds = {};var found = false;for (var i = 0, n = allElements.length; i < n; ++i) {var id = allElements[i].id;if (id) {if (allIds[id] === undefined) {allIds[id] = 1;} else {found = true;console.warn('Duplicate ID #' + id);}}}if (!found) {console.log('No duplicate IDs found');}})();

Or you can simply drag the bookmarklet below onto your bookmark toolbar

Duplicate ID Checker

Update: Ryan Guill let me know he wrote something similar and he’s saved it as a Gist. It’s interesting seeing the different approaches to accomplish the same thing.

Leave a Reply

Your email address will not be published. Required fields are marked *