Jak znormalizować HTML w JavaScript lub jQuery?

Tagi mogą mieć wiele atrybutów. Kolejność, w jakiej atrybuty pojawiają się w kodzie, nie ma znaczenia. Na przykład:

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

Jak mogę „znormalizować” kod HTML w JavaScript, aby kolejność atrybutów była zawsze taka sama? Nie obchodzi mnie, która kolejność jest wybrana, o ile zawsze jest taka sama.

UPDATE : moim pierwotnym celem było ułatwienie porównywania (w JavaScript) 2 stron HTML z niewielkimi różnicami. Ponieważ użytkownicy mogą używać innego oprogramowania do edycji kodu, kolejność atrybutów może się zmienić. To sprawia, że ​​różnica jest zbyt szczegółowa.

ODPOWIEDŹ : Cóż, po pierwsze dzięki za wszystkie odpowiedzi. I TAK, jest to możliwe. Oto, jak mi się to udało. To jest dowód słuszności koncepcji, z pewnością można go zoptymalizować:

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

To samo dla drugiego elementu diff, $('#different'). Teraz $('#original').html()i $('#different').html()pokaż kod HTML z atrybutami w tej samej kolejności.

JavaScript w rzeczywistości nie widzi strony internetowej w postaci opartego na tekście HTML, ale raczej jako strukturę drzewa znaną jako DOM lub Document Object Model. Kolejność atrybutów elementów HTML w DOM nie jest zdefiniowana (w rzeczywistości, jak komentuje Svend, nie są one nawet częścią DOM), więc pomysł sortowania ich w miejscu, w którym działa JavaScript, jest nieistotny.

Mogę tylko zgadywać, co próbujesz osiągnąć. Jeśli próbujesz to zrobić, aby poprawić wydajność JavaScript / strony, większość programów renderujących dokumenty HTML prawdopodobnie już włożyła dużo wysiłku w optymalizację dostępu do atrybutów, więc niewiele można tam zyskać.

Jeśli próbujesz uporządkować atrybuty, aby kompresja Gzip stron była bardziej skuteczna, gdy są one przesyłane przez sieć, pamiętaj, że JavaScript działa po tym momencie. Zamiast tego możesz spojrzeć na rzeczy, które działają po stronie serwera, chociaż prawdopodobnie jest to więcej kłopotów niż jest warte.

Weź HTML i przeanalizuj do struktury DOM. Następnie weź strukturę DOM i zapisz ją z powrotem do HTML. Podczas pisania posortuj atrybuty używając dowolnego stabilnego sortowania. Twój kod HTML zostanie teraz znormalizowany pod względem atrybutów.

To jest ogólny sposób normalizacji rzeczy. (analizuje dane nieznormalizowane, a następnie zapisuje je z powrotem w znormalizowanej formie).

Nie jestem pewien, dlaczego chcesz normalizować HTML, ale masz to. Dane to dane. ;-)

To jest dowód słuszności koncepcji, z pewnością można go zoptymalizować:

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

To samo dotyczy drugiego elementu różnicy, $ ('# inny'). Teraz $ ('# oryginał'). Html () i $ ('# inny'). Html () pokazują kod HTML z atrybutami w tej samej kolejności.

możesz spróbować otworzyć zakładkę HTML w firebugu, atrybuty są zawsze w tej samej kolejności

Właściwie przychodzi mi do głowy kilka dobrych powodów. Jednym z nich byłoby porównanie do dopasowywania tożsamości i do użytku z narzędziami typu „diff”, gdzie jest dość denerwujące, że semantycznie równoważne wiersze można oznaczyć jako „różne”.

Prawdziwe pytanie brzmi: „Dlaczego w Javascript”?

To pytanie „pachnie” „Mam problem i myślę, że mam odpowiedź… ale mam też problem z odpowiedzią”.

Gdyby PO wyjaśnił, dlaczego chcą to zrobić, ich szanse na uzyskanie dobrej odpowiedzi wzrosłyby dramatycznie.

Pytanie „Jaka jest tego potrzeba?” Odpowiedź: Dzięki temu kod jest bardziej czytelny i łatwiejszy do zrozumienia.

Dlaczego większość interfejsu użytkownika jest do niczego ... Wielu programistów nie rozumie potrzeby upraszczania pracy użytkowników. W tym przypadku zadaniem użytkownika jest odczyt i zrozumienie kodu. Jednym z powodów porządkowania atrybutów jest osoba, która musi debugować i utrzymywać kod. Uporządkowana lista, z którą zapoznaje się program, ułatwia mu pracę. Potrafi szybciej znaleźć atrybuty lub zorientować się, których atrybutów brakuje, i szybciej zmienić wartości atrybutów.

Ma to znaczenie tylko wtedy, gdy ktoś czyta źródło, więc dla mnie najpierw są atrybuty semantyczne, a potem mniej semantyczne ...

Oczywiście są wyjątki, jeśli masz na przykład kolejne <li>, wszystkie z jednym atrybutem na każdym, a inne tylko na niektórych, możesz chcieć upewnić się, że wszystkie udostępnione są na początku, a następnie indywidualne, np. .

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

(Nawet jeśli atrybut „b” jest bardziej użyteczny semantycznie niż „a”)

Masz pomysł.

Myślę, że jest to faktycznie możliwe, jeśli zawartość html jest przekazywana jako xml i renderowana przez xslt ... dlatego oryginalna zawartość w XML może być w dowolnej kolejności.