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



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



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


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



обновление: моя первоначальная цель состояла в том, чтобы облегчить diff (в 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-код с атрибутами в том же порядке.

528   8  

8 ответов:

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 отстой... Многие программисты не понимают необходимости упрощения работы пользователей. В этом случае задание пользователей-чтение и понимание кода. Одна из причин упорядочить атрибуты - это человек, который должен отлаживать и поддерживать код. Упорядоченный список, с которым знакомится программа, облегчает его работу. Он может быстрее найти атрибуты, или понять, какие атрибуты отсутствуют, и более быстро изменить значения атрибутов.

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

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

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

  • A

  • блитий>
    Слитий>

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

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

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

    Comments

      Ничего не найдено.