NOTE: Read all caveats. The point of this code is to illustrate the nature of the problem, which is that a pure JS solution is inadvisable.
First of all, hopefully what this is illustrates is that sometimes things that are doable are not always advisable. There are a ton of awesome tools out there that will provide far better error checking, like W3C's validator or add-ins/extensions that utilize it, like Validity for Chrome. Definitely use those.
But anyway, here's a minimalist example. Note that none of the DOM has references to its own line number, so you have to get the entire innerHTML attribute from the documentElement as a string. You match parts of that string, then break it into a substring at the match position, then count the number of carriage returns. Obviously, this code could be extensively refactored, but I think the point is clear (also jsFiddle example for those who want it, although the lines will be fubar):
EDIT
I've updated the regex to not match examples like <div>id="a"</div>. Still, if the OP wants something pure JS, he'll have to rely on this or a considerably more complex version with very minor benefits. The bottom line is that there are no associations between DOM nodes and line numbers. You will have to, on your own, figure out where the ID attributes are and then trace them back to their position. This is extremely error-prone. It might make some sense as programming practice but is extremely inadvisable in the real world. The best solution -- which I'm reiterating for the fourth time here -- is an extension or add-in that will just send your page on to a real validator like the W3C's.
The code below is designed to "just work," because there is no good way to do what the OP is asking.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body>
<div id="a"></div>
<div id="a"></div> <!-- catches this -->
<div id="b"></div>
<div>id="a"</div>
<div id="c"></div>
<div id="c"></div> <!-- catches this -->
<span>[id="a"]</span>
<script>
var re = /<[^>]+id="(.*?)"[^>]*>/g; // match id="..."
var nl = /\n\r?/g; // match newlines
var text = document.documentElement.innerHTML;
var match;
var ids = {}; // for holding IDs
var index = 0;
while (match = re.exec(text)) {
// Get current position in innerHTML
index = text.indexOf(match[0], index + 1);
// Check for a match in the IDs array
if (match[1] in ids) {
// Log line number based on how many newlines are matched
// up to current position, assuming an offset of 3 -- one
// for the doctype, one for <html>, and one for the current
// line
console.log("duplicate match at line " +
(text.substring(0, index).match(nl).length + 3));
} else {
// Add to ID array if no match
ids[match[1]] = null;
}
}
</script>
</body>
</html>
