Comment normaliser le HTML en JavaScript ou jQuery ?

Question

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 HTML en Javascript, afin que l'ordre des attributs soit toujours le même ? L'ordre choisi m'importe peu, du moment qu'il est toujours le même.

UPDATE Mon objectif initial était de faciliter la comparaison (en JavaScript) de deux pages HTML présentant de légères différences. Comme les utilisateurs pouvaient utiliser différents logiciels pour éditer le code, l'ordre des attributs pouvait changer. Cela rendait la différence trop verbeuse.

RÉPONSE : : Tout d'abord, merci pour toutes les réponses. Et OUI, c'est possible. Voici comment j'ai réussi à le faire. C'est une preuve de concept, cela 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érentiel, $('#different') . Maintenant $('#original').html() y $('#different').html() afficher le code HTML avec les attributs dans le même ordre.

Answer 1

JavaScript ne voit pas réellement une page Web sous la forme de texte HTML, mais plutôt sous la forme d'une structure arborescente connue sous le nom de DOM, ou Document Object Model. L'ordre des attributs des éléments 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), donc l'idée de les trier au moment où JavaScript s'exécute n'est pas pertinente.

Je ne peux que deviner ce que vous essayez d'obtenir. Si vous essayez de faire cela pour améliorer les performances de JavaScript/de la page, la plupart des moteurs de rendu de documents HTML font déjà probablement beaucoup d'efforts pour optimiser l'accès aux attributs, il n'y a donc pas grand-chose à gagner.

Si vous essayez de commander des attributs pour rendre la compression gzip des pages plus efficace lorsqu'elles sont envoyées sur le fil, comprenez que JavaScript s'exécute après ce moment-là. Au lieu de cela, vous pouvez chercher des choses qui s'exécutent côté serveur, bien que ce soit probablement plus de problèmes que cela n'en vaut la peine.

Answer 2

Prenez le HTML et analysez-le en une structure DOM. Puis prenez la structure DOM, et réécrivez-la en HTML. Pendant l'écriture, triez les attributs en utilisant un tri stable. Votre HTML sera maintenant normalisé en ce qui concerne les attributs.

Il s'agit d'une manière générale de normaliser les choses. (analyser les données non normalisées, puis les réécrire sous forme normalisée).

Je ne sais pas trop pourquoi vous voudriez normaliser le HTML, mais c'est comme ça. Les données sont les données ;-)

Answer 3

Il s'agit d'une preuve de concept, elle peut certainement être optimisée :

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.

Answer 4

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

Answer 5

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

La vraie question est "Pourquoi en Javascript" ?

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

Si le PO pouvait expliquer pourquoi ils veulent le faire, leurs chances d'obtenir une bonne réponse augmenteraient considérablement.