Hoe kan ik HTML normaliseren in JavaScript of jQuery?

Tags kunnen meerdere kenmerken hebben. De volgorde waarin attributen in de code worden weergegeven, doet er niet toe. Bijvoorbeeld:

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

Hoe kan ik de HTML in Javascript “normaliseren”, zodat de volgorde van de attributen altijd hetzelfde is? Het maakt mij niet uit welke volgorde wordt gekozen, als het maar altijd hetzelfde is.

UPDATE: mijn oorspronkelijke doel was om het gemakkelijker te maken om (in JavaScript) 2 HTML-pagina’s met kleine verschillen te differentiëren. Omdat gebruikers verschillende software konden gebruiken om de code te bewerken, kon de volgorde van de attributen veranderen. Dit maakt het verschil te uitgebreid.

ANTWOORD: Nou, allereerst bedankt voor alle antwoorden. En JA, het is mogelijk. Hier is hoe ik het voor elkaar heb gekregen. Dit is een proof of concept, het kan zeker geoptimaliseerd worden:

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

Hetzelfde geldt voor het tweede element van de diff, $('#different'). Nu tonen $('#original').html()en $('#different').html()HTML-code met attributen in dezelfde volgorde.


Antwoord 1, autoriteit 100%

JavaScript ziet eigenlijk geen webpagina in de vorm van op tekst gebaseerde HTML, maar eerder als een boomstructuur die bekend staat als het DOM of Document Object Model. De volgorde van HTML-elementattributen in de DOM is niet gedefinieerd (in feite, zoals Svend opmerkt, ze maken zelfs geen deel uit van de DOM), dus het idee om ze te sorteren op het punt waar JavaScript wordt uitgevoerd, is niet relevant.

Ik kan alleen maar raden wat je probeert te bereiken. Als u dit probeert om de JavaScript-/paginaprestaties te verbeteren, hebben de meeste HTML-documentrenderers vermoedelijk al veel energie gestoken in het optimaliseren van de toegang tot attributen, dus daar valt weinig te winnen.

Als u attributen probeert te bestellen om gzip-compressie van pagina’s effectiever te maken wanneer ze over de draad worden verzonden, moet u begrijpen dat JavaScript na dat tijdstip wordt uitgevoerd. In plaats daarvan wil je misschien kijken naar dingen die server-side draaien, hoewel het waarschijnlijk meer problemen oplevert dan het waard is.


Antwoord 2, autoriteit 51%

Neem de HTML en ontleden in een DOM-structuur. Neem vervolgens de DOM-structuur en schrijf deze terug naar HTML. Sorteer tijdens het schrijven de attributen met behulp van een stabiele sortering. Je HTML wordt nu genormaliseerd met betrekking tot attributen.

Dit is een algemene manier om dingen te normaliseren. (ontleed niet-genormaliseerde gegevens en schrijf ze vervolgens terug in genormaliseerde vorm).

Ik weet niet zeker waarom je HTML zou willen normaliseren, maar daar heb je het. Gegevens zijn gegevens. 😉


Antwoord 3, autoriteit 18%

Dit is een proof of concept, het kan zeker worden geoptimaliseerd:

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

Hetzelfde geldt voor het tweede element van de diff, $(‘#different’). Nu tonen $(‘#original’).html() en $(‘#different’).html() HTML-code met attributen in dezelfde volgorde.


Antwoord 4, autoriteit 12%

u kunt het HTML-tabblad openen in firebug, de attributen staan ​​altijd in dezelfde volgorde


Antwoord 5, autoriteit 7%

Eigenlijk kan ik een paar goede redenen bedenken. Een daarvan zou een vergelijking zijn voor identiteitsafstemming en voor gebruik met ‘diff’-type tools waar het behoorlijk vervelend is dat semantisch equivalente regels als “anders” kunnen worden gemarkeerd.

De echte vraag is “Waarom in Javascript”?

Deze vraag “ruikt” naar “Ik heb een probleem en ik denk dat ik een antwoord heb… maar ik heb ook een probleem met mijn antwoord.”

Als de OP zou uitleggen waaromze dit willen doen, zou hun kans op een goed antwoord enorm toenemen.


Antwoord 6, autoriteit 3%

De vraag “Wat is hiervoor nodig?”
Antwoord: Het maakt de code leesbaarder en gemakkelijker te begrijpen.

Waarom de meeste gebruikersinterface waardeloos is… Veel programmeurs begrijpen de noodzaak niet om het werk van de gebruiker te vereenvoudigen. In dit geval is het de taak van de gebruiker om de code te lezen en te begrijpen.
Een reden om de attributen te bestellen is voor de mens die de code moet debuggen en onderhouden. Een geordende lijst, waarmee het programma vertrouwd raakt, maakt zijn werk gemakkelijker. Hij kan sneller attributen vinden, of beseffen welke attributen ontbreken, en attribuutwaarden sneller wijzigen.


Antwoord 7

Dit is alleen van belang als iemand de bron leest, dus voor mij zijn het eerst de semantische attributen, daarna de minder semantische…

Er zijn natuurlijk uitzonderingen, als je bijvoorbeeld opeenvolgende <li>’s hebt, allemaal met één attribuut op elk en andere slechts op sommige, wil je er misschien voor zorgen dat de gedeelde allemaal aan het begin staan, gevolgd door individuele, bijv.

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

(Zelfs als het kenmerk “b” semantisch nuttiger is dan “a”)

Je snapt het idee.


Antwoord 8

het is eigenlijk mogelijk, denk ik, als de html-inhoud wordt doorgegeven als xml en wordt weergegeven via xslt… daarom kan uw originele inhoud in XML in elke gewenste volgorde staan.

Other episodes