Как нормализовать HTML в JavaScript или jQuery?

Теги могут иметь несколько атрибутов. Порядок, в котором атрибуты появляются в коде, не имеет значения. Например:

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

Как я могу «нормализовать» HTML в Javascript, чтобы порядок атрибутов всегда был одинаковым? Мне все равно, какой порядок будет выбран, главное, чтобы он всегда был одинаковым.

ОБНОВЛЕНИЕ : моей первоначальной целью было упростить сравнение (в JavaScript) двух 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 не определен (на самом деле, как отмечает Svend, они даже не являются частью 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, $ ('# different'). Теперь $ ('# original'). Html () и $ ('# different'). Html () показывают HTML-код с атрибутами в том же порядке.

вы можете попробовать открыть вкладку HTML в firebug, атрибуты всегда в одном порядке

На самом деле, я могу придумать несколько веских причин. Один из них - сравнение для сопоставления идентичности и для использования с инструментами типа 'diff', где довольно раздражает то, что семантически эквивалентные строки могут быть помечены как "разные".

Настоящий вопрос: «Почему именно в Javascript»?

Этот вопрос «пахнет» словами: «У меня есть проблема, и я думаю, что у меня есть ответ ... но у меня тоже есть проблема с моим ответом».

Если ОП объяснит, почему они хотят это сделать, их шансы получить хороший ответ резко возрастут.

На вопрос "Зачем это нужно?" Ответ: Это делает код более читаемым и понятным.

Почему большинство UI - отстой ... Многие программисты не понимают необходимости упрощения работы пользователей. В этом случае работа пользователя - это чтение и понимание кода. Одна из причин заказать атрибуты для человека, который должен отлаживать и поддерживать код. Упорядоченный список, с которым знакомится программа, облегчает его работу. Он может быстрее находить атрибуты или понимать, какие атрибуты отсутствуют, и быстрее изменять значения атрибутов.

Это имеет значение только тогда, когда кто-то читает исходный текст, поэтому для меня сначала семантические атрибуты, затем менее семантические ...

Конечно, есть исключения, если у вас есть, например, последовательные <li>, все с одним атрибутом для каждого и другие только для некоторых, вы можете убедиться, что все общие элементы находятся в начале, а за ними следуют отдельные, например .

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

(Даже если атрибут "b" семантически более полезен, чем "a")

Вы уловили идею.

я думаю, это действительно возможно, если содержимое html передается как xml и отображается через xslt ... поэтому исходное содержимое в XML может быть в любом порядке.