mrbusche.com

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](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');}})();)

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.