Wie normalisiere ich HTML in JavaScript oder jQuery?

Tags können mehrere Attribute haben. Die Reihenfolge, in der Attribute im Code angezeigt werden, spielt keine Rolle. Beispielsweise:

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

Wie kann ich den HTML-Code in Javascript "normalisieren", damit die Reihenfolge der Attribute immer gleich ist? Es ist mir egal, welche Reihenfolge gewählt wird, solange es immer dieselbe ist.

UPDATE : Mein ursprüngliches Ziel war es, das Diff (in JavaScript) von 2 HTML-Seiten mit geringfügigen Unterschieden zu vereinfachen. Da Benutzer zum Bearbeiten des Codes unterschiedliche Software verwenden können, kann sich die Reihenfolge der Attribute ändern. Dies macht den Unterschied zu ausführlich.

ANTWORT : Nun, zuerst danke für alle Antworten. Und JA, es ist möglich. Hier ist, wie ich es geschafft habe. Dies ist ein Proof of Concept, der durchaus optimiert werden kann:

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);
    }
  }
});

Gleiches gilt für das zweite Element des Diff $('#different'). Jetzt $('#original').html()und $('#different').html()zeigt HTML - Code mit Attributen in der gleichen Reihenfolge.

JavaScript sieht eine Webseite nicht in Form von textbasiertem HTML, sondern als Baumstruktur, die als DOM oder Document Object Model bezeichnet wird. Die Reihenfolge der HTML-Elementattribute im DOM ist nicht definiert (tatsächlich sind sie, wie Svend kommentiert, nicht einmal Teil des DOM), sodass die Idee, sie an dem Punkt zu sortieren, an dem JavaScript ausgeführt wird, irrelevant ist.

Ich kann nur raten, was Sie erreichen wollen. Wenn Sie dies versuchen, um die Leistung von JavaScript / Seiten zu verbessern, haben die meisten HTML-Dokumentrenderer vermutlich bereits große Anstrengungen unternommen, um den Attributzugriff zu optimieren, sodass dort wenig zu gewinnen ist.

Wenn Sie versuchen, Attribute zu bestellen, um die GZIP-Komprimierung von Seiten beim Senden über das Netzwerk effektiver zu gestalten, sollten Sie verstehen, dass JavaScript nach diesem Zeitpunkt ausgeführt wird. Stattdessen möchten Sie vielleicht Dinge betrachten, die stattdessen serverseitig ausgeführt werden, obwohl es wahrscheinlich mehr Probleme gibt, als es wert ist.

Nehmen Sie den HTML-Code und analysieren Sie ihn in eine DOM-Struktur. Nehmen Sie dann die DOM-Struktur und schreiben Sie sie wieder in HTML aus. Sortieren Sie die Attribute beim Schreiben mit einer beliebigen stabilen Sortierung. Ihr HTML wird nun in Bezug auf Attribute normalisiert.

Dies ist ein allgemeiner Weg, um Dinge zu normalisieren. (Analysieren Sie nicht normalisierte Daten und schreiben Sie sie dann in normalisierter Form zurück.)

Ich bin mir nicht sicher, warum Sie HTML normalisieren möchten, aber da haben Sie es. Daten sind Daten. ;-);

Dies ist ein Proof of Concept, der durchaus optimiert werden kann:

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);
    }
  }
 });

Gleiches gilt für das zweite Element des Diff, $ ('# different'). Jetzt zeigen $ ('# original'). Html () und $ ('# different'). Html () HTML-Code mit Attributen in derselben Reihenfolge.

Sie können versuchen, die HTML-Registerkarte in Firebug zu öffnen. Die Attribute sind immer in derselben Reihenfolge

Eigentlich kann ich mir ein paar gute Gründe vorstellen. Ein Vergleich wäre der Identitätsabgleich und die Verwendung mit Werkzeugen vom Typ "diff", bei denen es ziemlich ärgerlich ist, dass semantisch äquivalente Zeilen als "unterschiedlich" markiert werden können.

Die eigentliche Frage ist "Warum in Javascript"?

Diese Frage "riecht" nach "Ich habe ein Problem und ich glaube, ich habe eine Antwort ... aber ich habe auch ein Problem mit meiner Antwort."

Wenn das OP erklären würde, warum sie dies tun wollen, würden ihre Chancen auf eine gute Antwort dramatisch steigen.

Die Frage "Was ist die Notwendigkeit dafür?" Antwort: Dadurch wird der Code besser lesbar und verständlicher.

Warum die meisten Benutzeroberflächen scheiße sind ... Viele Programmierer verstehen nicht, wie wichtig es ist, den Benutzerjob zu vereinfachen. In diesem Fall liest und versteht der Benutzer den Code. Ein Grund, die Attribute zu bestellen, ist für den Menschen, der den Code debuggen und pflegen muss. Eine geordnete Liste, mit der das Programm vertraut wird, erleichtert seine Arbeit. Er kann Attribute schneller finden oder erkennen, welche Attribute fehlen, und Attributwerte schneller ändern.

Dies ist nur wichtig, wenn jemand die Quelle liest. Für mich sind es also zuerst semantische Attribute, dann weniger semantische ...

Es gibt natürlich Ausnahmen. Wenn Sie beispielsweise aufeinanderfolgende <li> haben, alle mit einem Attribut für jedes und andere nur für einige, möchten Sie möglicherweise sicherstellen, dass die gemeinsam genutzten am Anfang stehen, gefolgt von einzelnen, z .

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

(Auch wenn das Attribut "b" semantisch nützlicher ist als "a")

Du hast die Idee.

Ich denke, es ist tatsächlich möglich, wenn der HTML-Inhalt als XML übergeben und über xslt gerendert wird. Daher kann Ihr ursprünglicher Inhalt in XML in beliebiger Reihenfolge vorliegen.