-1

I've found that there are a number of duplicate IDs in the project I'm working on. I don't want to scrape through the entire product all at once, or use on overly heavyweight solution like a full HTML validator - I just want a quick script I can run on any given page to easily identify any duplicate IDs present while I'm working there.

I've found a question along these lines, but it's very old and requests a jQuery solution - we don't use jQuery in this project and it's frankly pretty out of date.

So: what's a little ES6 snippet I can run in the console to identify duplicate IDs in the DOM?

Anomaly
  • 932
  • 1
  • 10
  • 18

1 Answers1

-1

In modern JavasScript (ES6+), without jQuery:

[...document.querySelectorAll('[id]')].forEach(el => {
  const dups = document.querySelectorAll(`[id="${el.id}"]`);

  if (dups.length > 1 && dups[0] === el) {
    console.error(`Duplicate IDs #${el.id}`, ...dups);
  }
});

All credit to @Rafi: https://stackoverflow.com/a/62145753/1033203

Anomaly
  • 932
  • 1
  • 10
  • 18
  • 1
    Mark the question as a duplicate. Don't post a duplicate answer to a duplicate question. – devlin carnate Oct 14 '21 at 22:30
  • Wait. I'm just realizing that you are the author of the question ?!?!?! WHY. Why have you posted a question that you obviously knew was a duplicate? – devlin carnate Oct 14 '21 at 22:39
  • 1
    Because it's not a duplicate - the previous question specifically requests jQuery, and the answer that doesn't use jQuery is difficult to find because old jQuery answers are heavily upvoted. – Anomaly Oct 15 '21 at 00:44
  • 1
    I agree with @Anomaly that there's value in having this as a separate Q/A. The [supposed duplicate](https://stackoverflow.com/q/482763/13138364) explicitly asks about jQuery in the title/question/tags. If I'm googling for an JS/ES6 solution, I could definitely see myself skipping that link. – tdy Oct 15 '21 at 02:50
  • @tdy : your opinion doesn't follow [Meta standards](https://meta.stackexchange.com/questions/10841/how-should-duplicate-questions-be-handled) on what constitutes a duplicate and whether a separate Q/A should be opened. – devlin carnate Oct 15 '21 at 16:08
  • @Anomaly : the way to raise visibility on answers is to upvote them, not open a duplicate question – devlin carnate Oct 15 '21 at 16:09
  • 1
    @devlincarnate It's not my/an opinion. That other question is explicitly titled/asking/tagged about jQuery. jQuery is _not_ JavaScript/ES6. – tdy Oct 15 '21 at 16:11
  • @tdy : that doesn't matter -- read my link above on what constitutes a duplicate. Duplicates don't have to be EXACT. – devlin carnate Oct 15 '21 at 16:13
  • I read it, it talks about _conceptual_ similarity. If the question is explicitly titled jQuery and you're googling for a JS/ES6 answer, why would you click that jQuery question? – tdy Oct 15 '21 at 16:14
  • @tdy : Absolutely. Because I know how this site works and, especially when it comes to jQuery & JS, I know there is very likely to be a pure JS answer. – devlin carnate Oct 15 '21 at 16:16
  • @tdy : (and yes, it is your opinion, because you can see that this question has in FACT been closed as a duplicate) – devlin carnate Oct 15 '21 at 16:18
  • I don't know why I bother trying to contribute to this site – Anomaly Oct 15 '21 at 23:18