Come normalizzare l'HTML in JavaScript o jQuery?

I tag possono avere più attributi. L'ordine in cui gli attributi vengono visualizzati nel codice non ha importanza. Per esempio:

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

Come posso "normalizzare" l'HTML in Javascript, in modo che l'ordine degli attributi sia sempre lo stesso? Non mi interessa quale ordine viene scelto, purché sia ​​sempre lo stesso.

AGGIORNAMENTO : il mio obiettivo originale era di rendere più facile diff (in JavaScript) 2 pagine HTML con lievi differenze. Poiché gli utenti possono utilizzare software diversi per modificare il codice, l'ordine degli attributi potrebbe cambiare. Questo rende il diff troppo prolisso.

RISPOSTA : Bene, prima grazie per tutte le risposte. E SÌ, è possibile. Ecco come sono riuscito a farlo. Questa è una prova di concetto, sicuramente può essere ottimizzata:

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

Stessa cosa per il secondo elemento del diff, $('#different'). Ora $('#original').html()e $('#different').html()mostra il codice HTML con attributi nello stesso ordine.

JavaScript in realtà non vede una pagina web sotto forma di HTML basato su testo, ma piuttosto come una struttura ad albero nota come DOM, o Document Object Model. L'ordine degli attributi degli elementi HTML nel DOM non è definito (infatti, come commenti di Svend, non fanno nemmeno parte del DOM), quindi l'idea di ordinarli nel punto in cui viene eseguito JavaScript è irrilevante.

Posso solo immaginare cosa stai cercando di ottenere. Se stai cercando di farlo per migliorare le prestazioni di JavaScript / pagina, la maggior parte dei renderizzatori di documenti HTML presumibilmente si è già impegnata molto nell'ottimizzazione dell'accesso agli attributi, quindi c'è poco da guadagnare.

Se stai cercando di ordinare gli attributi per rendere più efficace la compressione gzip delle pagine quando vengono inviate in rete, tieni presente che JavaScript viene eseguito dopo quel momento. Invece, potresti voler guardare le cose che girano invece sul lato server, anche se probabilmente è più un problema di quanto valga la pena.

Prendi l'HTML e analizzalo in una struttura DOM. Quindi prendi la struttura DOM e riscrivila in HTML. Durante la scrittura, ordina gli attributi utilizzando un ordinamento stabile. Il tuo codice HTML verrà ora normalizzato per quanto riguarda gli attributi.

Questo è un modo generale per normalizzare le cose. (analizzare i dati non normalizzati, quindi riscriverli in forma normalizzata).

Non sono sicuro del motivo per cui vorresti normalizzare l'HTML, ma il gioco è fatto. I dati sono dati. ;-)

Questa è una prova di concetto, sicuramente può essere ottimizzata:

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

Stessa cosa per il secondo elemento del diff, $ ('# different'). Ora $ ('# original'). Html () e $ ('# different'). Html () mostrano il codice HTML con attributi nello stesso ordine.

puoi provare ad aprire la scheda HTML in Firebug, gli attributi sono sempre nello stesso ordine

In realtà, posso pensare ad alcune buone ragioni. Uno potrebbe essere il confronto per la corrispondenza dell'identità e per l'uso con strumenti di tipo "diff" in cui è abbastanza fastidioso che le linee semanticamente equivalenti possano essere contrassegnate come "diverse".

La vera domanda è "Perché in Javascript"?

Questa domanda "odora" di "Ho un problema e penso di avere una risposta ... ma ho anche un problema con la mia risposta".

Se l'OP spiegasse perché vuole farlo, le sue possibilità di ottenere una buona risposta aumenterebbero notevolmente.

La domanda "A cosa serve?" Risposta: rende il codice più leggibile e più facile da capire.

Perché la maggior parte dell'interfaccia utente fa schifo ... Molti programmatori non riescono a capire la necessità di semplificare il lavoro degli utenti. In questo caso, il lavoro dell'utente è leggere e comprendere il codice. Una ragione per ordinare gli attributi è per l'essere umano che deve eseguire il debug e mantenere il codice. Un elenco ordinato, con cui il programma acquisisce familiarità, facilita il suo lavoro. Può trovare più rapidamente gli attributi o rendersi conto di quali attributi mancano e modificare più rapidamente i valori degli attributi.

Questo importa solo quando qualcuno sta leggendo la fonte, quindi per me sono prima gli attributi semantici, poi quelli meno semantici ...

Ci sono ovviamente delle eccezioni, se hai ad esempio <li> consecutivi, tutti con un attributo su ciascuno e altri solo su alcuni, potresti voler assicurarti che quelli condivisi siano tutti all'inizio, seguiti da quelli individuali, ad es. .

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

(Anche se l'attributo "b" è più semanticamente utile di "a")

Hai l'idea.

in realtà è possibile, penso, se i contenuti html vengono passati come xml e renderizzati tramite xslt ... quindi il contenuto originale in XML può essere nell'ordine desiderato.