Як нормалізувати HTML в JavaScript або jQuery?

Теги можуть мати кілька атрибутів. Порядок появи атрибутів у коді не має значення. Наприклад:

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

Як я можу "нормалізувати" HTML у Javascript, так що порядок атрибутів завжди однаковий? Мені байдуже, який порядок обраний, якщо він завжди однаковий.

ОНОВЛЕННЯ : моєю початковою метою було полегшити розрізнення (у JavaScript) 2 HTML-сторінок з невеликими відмінностями. Оскільки користувачі могли використовувати різне програмне забезпечення для редагування коду, порядок атрибутів міг змінюватися. Це робить різницю занадто багатослівною.

ВІДПОВІДЬ : Ну, спочатку дякую за всі відповіді. І ТАК, це можливо. Ось як мені це вдалося. Це доказ концепції, його, безумовно, можна оптимізувати:

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

Те ж саме для другого елементу диференціала, $('#different'). Тепер $('#original').html()і $('#different').html()показати HTML код з атрибутами в тому ж порядку.

JavaScript насправді не бачить веб-сторінку у вигляді текстового HTML, а скоріше як деревоподібну структуру, відому як DOM, або об'єктна модель документа. Порядок атрибутів елементів HTML у DOM не визначений (насправді, як зауважує Свенд, вони навіть не є частиною DOM), тому ідея сортувати їх у точці, де працює JavaScript, неактуальна.

Я можу лише здогадуватися, чого ви намагаєтесь досягти. Якщо ви намагаєтеся зробити це, щоб поліпшити продуктивність JavaScript / сторінки, більшість рендеристів HTML-документів вже, мабуть, докладають багато зусиль для оптимізації доступу до атрибутів, тому тут мало що можна отримати.

Якщо ви намагаєтеся впорядкувати атрибути, щоб зробити стиснення gzip сторінок більш ефективним, оскільки вони надсилаються по дроту, розумійте, що JavaScript запускається після цього моменту часу. Натомість вам може знадобитися розглянути речі, які працюють на стороні сервера, натомість це, мабуть, більше проблем, ніж це варте.

Візьміть HTML і проаналізуйте структуру DOM. Потім візьміть структуру DOM і запишіть її назад у HTML. Під час запису сортуйте атрибути, використовуючи будь-яке стабільне сортування. Тепер ваш HTML буде нормалізований щодо атрибутів.

Це загальний спосіб нормалізації речей. (проаналізуйте ненормовані дані, а потім запишіть їх назад у нормалізованій формі).

Я не впевнений, чому ви хочете нормалізувати HTML, але там у вас є. Дані - це дані. ;-)

Це доказ концепції, його, безумовно, можна оптимізувати:

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

Те саме для другого елемента diff, $ ('# різний'). Тепер $ ('# original'). Html () і $ ('# different'). Html () показують HTML-код з атрибутами в однаковому порядку.

Ви можете спробувати відкрити вкладку HTML у firebug, атрибути завжди в однаковому порядку

Насправді я можу придумати кілька вагомих причин. Можна порівняти порівняння ідентичності та використання з інструментами типу „diff”, де досить прикро, що семантично еквівалентні рядки можуть бути позначені як „різні”.

Справжнє запитання - "Чому в Javascript"?

Це питання "пахне" "у мене проблема, і я думаю, що маю відповідь ... але у мене є проблема і зі своєю відповіддю".

Якщо ОП пояснить, чому вони хочуть це зробити, їх шанси отримати хорошу відповідь різко зростуть.

Питання "Що для цього потрібно?" Відповідь: Це робить код більш читабельним та легшим для розуміння.

Чому більшість інтерфейсів відмовляє ... Багато програмістів не розуміють необхідності спрощення роботи користувачів. У цьому випадку робота користувачів - це читання та розуміння коду. Однією з причин замовлення атрибутів є людина, яка повинна налагоджувати та підтримувати код. Впорядкований список, з яким програма знайомиться, полегшує йому роботу. Він може швидше знаходити атрибути або розуміти, яких атрибутів не вистачає, і швидше змінювати значення атрибутів.

Це має значення лише тоді, коли хтось читає джерело, тому для мене це семантичні атрибути спочатку, менш семантичні атрибути далі ...

Звичайно, є винятки. Якщо у вас є, наприклад, послідовні <li>, усі з одним атрибутом на кожному, а інші лише на деяких, можливо, ви хочете переконатися, що всі спільні знаходяться на початку, а потім окремі, наприклад .

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

(Навіть якщо атрибут "b" більш семантично корисний, ніж "a")

Ви зрозуміли ідею.

я думаю, це насправді можливо, якщо вміст html передається як xml і відображається через xslt ... тому ваш вихідний вміст у XML може бути в будь-якому порядку.