NOTE : Lire tous les avertissements. Le but de ce code est d'illustrer la nature du problème, à savoir qu'une solution purement JS est déconseillée.
Tout d'abord, j'espère que ce que cela illustre, c'est que parfois, les choses qui sont faisables ne sont pas toujours recommandables. Il existe une tonne d'outils géniaux qui permettent un meilleur contrôle des erreurs, comme par exemple Le validateur du W3C ou les modules complémentaires/extensions qui l'utilisent, tels que Validité pour Chrome. Il faut absolument les utiliser.
Mais de toute façon, voici un exemple minimaliste. Notez qu'aucun DOM n'a de références à son propre numéro de ligne, vous devez donc récupérer l'ensemble de la ligne innerHTML
de l'attribut documentElement
comme une chaîne de caractères. Vous faites correspondre des parties de cette chaîne, puis vous la séparez en une sous-chaîne à la position de correspondance, puis vous comptez le nombre de retours chariot. Il est évident que ce code pourrait être largement remanié, mais je pense que l'idée est claire (également Exemple de jsFiddle pour ceux qui le souhaitent, même si les lignes seront fubar) :
EDIT
J'ai mis à jour l'expression pour ne pas correspondre à des exemples tels que <div>id="a"</div>
. Néanmoins, si le PO veut quelque chose de purement JS, il devra s'en remettre à cette version ou à une version considérablement plus complexe avec des avantages très mineurs . L'essentiel est qu'il n'existe aucune association entre les nœuds DOM et les numéros de ligne. Vous devrez, par vos propres moyens, déterminer où se trouvent les attributs ID, puis remonter jusqu'à leur position. Cette méthode est extrêmement sujette aux erreurs. Elle peut avoir un certain sens en tant que pratique de programmation, mais elle est extrêmement déconseillée dans le monde réel. La meilleure solution - que je répète pour la quatrième fois ici - est une extension ou un module complémentaire qui enverra simplement votre page à un véritable validateur comme celui du W3C.
Le code ci-dessous est conçu pour "juste travailler", parce qu'il n'y a pas de bonne façon de faire ce que le PO demande.
<!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>