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

Question

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

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

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

Answer 1

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

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

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

Answer 2

Взять HTML и разобрать в структуру DOM. Затем возьмите структуру DOM и запишите ее обратно в HTML. Во время записи сортируйте атрибуты, используя любую стабильную сортировку. Ваш HTML-код теперь будет нормализован в отношении атрибутов.

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

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

Answer 3

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

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

Answer 4

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

Answer 5

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

Реальный вопрос - «Почему в Javascript»?

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

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

Answer 6

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

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

Answer 7

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

Answer 8

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

Конечно, есть исключения, если у вас есть, например, последовательные

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

A
B
C

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

Вы поняли идею.