web-dev-qa-db-fra.com

Comment normaliser HTML en JavaScript ou jQuery?

Les étiquettes peuvent avoir plusieurs attributs. L'ordre dans lequel les attributs apparaissent dans le code n'a pas d'importance. Par exemple:

<a href="#" title="#">
<a title="#" href="#">

Comment puis-je "normaliser" le code HTML en Javascript, de sorte que l'ordre des attributs est toujours le même? Je ne me soucie pas quel ordre est choisi, tant qu'il est toujours le même.

UPDATE : mon objectif initial était de faciliter la diff (en JavaScript) 2 pages HTML avec de légères différences. Étant donné que les utilisateurs peuvent utiliser un logiciel différent pour éditer le code, l'ordre des attributs peut changer. Cela rend le diff trop verbeux.

REPONDRE : Bien, merci d'abord pour toutes les réponses. Et oui, c'est possible. Voici comment j'ai réussi à le faire. Ceci est une preuve de concept, il peut certainement être optimisé:

function sort_attributes(a, b) {
  if( a.name == b.name) {
    return 0;
  }

  return (a.name < b.name) ? -1 : 1;
}

$("#original").find('*').each(function() {
  if (this.attributes.length > 1) {
    var attributes = this.attributes;
    var list = [];

    for(var i =0; i < attributes.length; i++) {
      list.Push(attributes[i]);
    }

    list.sort(sort_attributes);

    for(var i = 0; i < list.length; i++) {
      this.removeAttribute(list[i].name, list[i].value);
    }

    for(var i = 0; i < list.length; i++) {
      this.setAttribute(list[i].name, list[i].value);
    }
  }
});

Même chose pour le deuxième élément du diff, $('#different'). Maintenant, $('#original').html() et $('#different').html() affichent le code HTML avec les attributs dans le même ordre.

javascriptjqueryhtmlhtml-parsing
83
Julien

Ceci est une preuve de concept, il peut certainement être optimisé:

function sort_attributes(a, b) {
  if( a.name == b.name) {
    return 0;
  }

  return (a.name < b.name) ? -1 : 1;
 }

$("#original").find('*').each(function() {
  if (this.attributes.length > 1) {
    var attributes = this.attributes;
    var list = [];

    for(var i =0; i < attributes.length; i++) {
      list.Push(attributes[i]);
    }

     list.sort(sort_attributes);

    for(var i = 0; i < list.length; i++) {
      this.removeAttribute(list[i].name, list[i].value);
    }

     for(var i = 0; i < list.length; i++) {
       this.setAttribute(list[i].name, list[i].value);
    }
  }
 });

Même chose pour le deuxième élément du diff, $ ('# différent'). Maintenant $ ('# original'). Html () et $ ('# différent'). Html () affichent le code HTML avec les attributs dans le même ordre.

12
Julien

JavaScript ne voit pas réellement une page Web sous la forme de HTML textuel, mais plutôt sous la forme d'une arborescence connue sous le nom de DOM, ou Document Object Model. L'ordre des attributs d'élément HTML dans le DOM n'est pas défini (en fait, comme le fait remarquer Svend, ils ne font même pas partie du DOM). Par conséquent, l'idée de les trier à l'endroit où JavaScript s'exécute n'a aucune pertinence.

Je ne peux que deviner ce que vous essayez d'atteindre. Si vous essayez de le faire pour améliorer les performances de JavaScript/des pages, la plupart des moteurs de rendu de document HTML consacrent déjà beaucoup d'efforts à l'optimisation de l'accès aux attributs. Il y a donc peu à gagner.

Si vous essayez de commander des attributs pour rendre plus efficace la compression gzip des pages lors de leur envoi par fil, sachez que JavaScript s'exécute après ce moment. Au lieu de cela, vous voudrez peut-être regarder des choses qui fonctionnent à la place du côté serveur, bien que cela pose probablement plus de problèmes que cela ne vaut la peine.

68
Tung Nguyen

Prenez le code HTML et analysez-le dans une structure DOM. Ensuite, prenez la structure DOM et écrivez-la au format HTML. Pendant l'écriture, triez les attributs en utilisant n'importe quel tri stable. Votre code HTML sera maintenant normalisé en ce qui concerne les attributs.

C'est un moyen général de normaliser les choses. (analyser les données non normalisées, puis les réécrire sous forme normalisée).

Je ne sais pas pourquoi vous voudriez normaliser HTML, mais voilà. Les données sont des données. ;-)

35
Kim Bruning

vous pouvez essayer d'ouvrir l'onglet HTML dans Firebug, les attributs sont toujours dans le même ordre

8
tsurahman

En fait, je peux penser à quelques bonnes raisons. L'une serait la comparaison pour la correspondance d'identité et pour l'utilisation avec des outils de type 'diff' où il est assez gênant que des lignes sémantiquement équivalentes puissent être marquées comme "différentes".

La vraie question est "Pourquoi en Javascript"?

Cette question "sent" de "j'ai un problème et je pense avoir une réponse ... mais j'ai également un problème avec ma réponse."

Si les OP expliquaient pourquoi ils veulent le faire, leurs chances d'obtenir une bonne réponse augmenteraient considérablement.

5
Snowhare

La question "Quel est le besoin pour cela?" Réponse: Cela rend le code plus lisible et plus facile à comprendre.

Pourquoi la plupart des UI sont nuls ... De nombreux programmeurs ne comprennent pas la nécessité de simplifier le travail des utilisateurs. Dans ce cas, le travail de l'utilisateur lit et comprend le code. L'une des raisons de commander les attributs est pour l'utilisateur qui doit déboguer et gérer le code. Une liste ordonnée, avec laquelle le programme se familiarise, facilite son travail. Il peut trouver plus rapidement des attributs ou savoir quels attributs sont manquants et modifier plus rapidement les valeurs d'attribut.

2
signedbit

je pense qu’il est effectivement possible, si le contenu HTML est passé au format XML et rendu via xslt ... votre contenu original en XML peut donc être dans l’ordre que vous souhaitez.

0
Nasaralla

Cela n'a d'importance que lorsque quelqu'un lit le code source, donc pour moi ce sont les attributs sémantiques d'abord, les suivants moins sémantiques ensuite ...

Il y a des exceptions bien sûr, si vous avez par exemple des <li> consécutives, toutes avec un attribut sur chaque attribut et d'autres seulement sur certains, vous pouvez vous assurer que les attributs partagés sont tous au début, suivis des attributs individuels, par exemple .

<li a = "x"> A </ li>
<li a = "y" b = "t"> B </ li>
<li a = "z"> C </ li>

(Même si l'attribut "b" est plus sémantiquement utile que "a")

Vous avez eu l'idée.

0
Ali