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

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

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

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

UPDATE: моя первоначальная цель состояла в том, чтобы упростить различие (на JavaScript) 2 HTML-страницы с небольшими различиями. Поскольку пользователи могут использовать другое программное обеспечение для редактирования кода, порядок атрибутов может измениться. Это делает diff слишком многословным.

ANSWER: Хорошо, сначала спасибо за все ответы. И ДА, это возможно. Вот как мне удалось это сделать. Это доказательство концепции, оно, безусловно, может быть оптимизировано:

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 с атрибутами в том же порядке.

ОТВЕТЫ

Ответ 1

Это доказательство концепции, оно, безусловно, может быть оптимизировано:

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 с атрибутами в том же порядке.

Ответ 2

JavaScript фактически не видит веб-страницу в виде текстового HTML, а скорее как древовидная структура, известная как DOM или Document Object Model. Порядок атрибутов HTML-элемента в DOM не определен (на самом деле, как комментарии Svend, они даже не являются частью DOM), поэтому идея их сортировки в точке, где выполняется JavaScript, не имеет значения.

Я могу только догадываться, чего вы пытаетесь достичь. Если вы пытаетесь сделать это для повышения производительности JavaScript/страницы, большинство рендерингов документов HTML уже, вероятно, прикладывают большие усилия для оптимизации доступа к атрибутам, поэтому там мало что можно получить.

Если вы пытаетесь заказать атрибуты, чтобы сделать gzip-сжатие страниц более эффективным, поскольку они отправлены по проводу, поймите, что JavaScript работает после этого момента времени. Вместо этого вы можете захотеть взглянуть на вещи, которые запускают серверную сторону, хотя это, вероятно, больше проблем, чем это стоит.

Ответ 3

Возьмите HTML и проанализируйте структуру DOM. Затем возьмите структуру DOM и запишите ее обратно в HTML. При написании сортируйте атрибуты с помощью любого стабильного сорта. Теперь ваш HTML будет нормализован в отношении атрибутов.

Это общий способ нормализации вещей. (проанализировать ненормированные данные, затем записать их в нормализованном виде). ​​

Я не уверен, почему вы хотите нормализовать HTML, но там у вас есть. Данные - это данные.; -)

Ответ 4

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

Ответ 5

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

Реальный вопрос: "Почему в Javascript"?

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

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

Ответ 6

Вопрос: "Какая потребность в этом?" Ответ. Это делает код более понятным и понятным.

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

Ответ 7

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

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

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

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

Вы получаете идею.

Ответ 8

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