2 votes

Code qui alertera sur la position du DOM

Duplicata possible :
JQuery pour vérifier les identifiants en double dans un DOM

Supposons que j'ai un code :

<div id="one">
    <div id="two"></div>
    <div id="three"></div>
</div>

<div id="four">
    <div id="two"></div>
</div>

<div id="one">
  <p id="five">
    <span id="three"></span>
  </p>
</div>

(un grand code HTML avec différents éléments DOM).

Objectif :

Est-il possible de construire un code jQuery ou JavaScript qui m'alertera sur la duplication de id dans le document avec la position. Ici, la position signifie ce qui suit ;

> duplicate id: 'div#two' > within `div#four`, `div#one` 
> duplicate id: 'div#one' > parent of `p#five`
> duplicate id: 'span#three' > within `p#five` and such a pattern.

Note :

J'ai trouvé un problème similaire au mien, mais pas exact. Comme il ne s'agit pas d'un doublon d'une question posée auparavant. Donc ne la fermez pas.

4voto

jsonnull Points 415

Si tout ce que vous voulez faire est d'éliminer les identifiants en double, vous devriez valider votre html.

http://validator.w3.org/

Cela vous alertera sur les doublons d'identifiants et vous permettra de vous assurer que votre code est bien formé.

3voto

brymck Points 5349

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>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X