Предложения по созданию инструмента HTML Diff?

DOM — это структура данных — это дерево.

Запустите оба файла через следующий Perl-скрипт, затем используйте diff -iw, чтобы выполнить сравнение без учета регистра и пробелов.

#! /usr/bin/perl -w

use strict;

undef $/;

my $html = <STDIN>;

while ($html =~ /\S/) {
  if ($html =~ s/^\s*<//) {
    $html =~ s/^(.*?)>// or die "malformed HTML";
    print "<$1>\n";
  } else {
    $html =~ s/^([^<]+)//;
    print "(text)\n";
  }
}

@Mike - это сравнило бы все, включая содержимое страницы, чего не хотел оригинальный постер.

Предполагая, что у вас есть доступ к DOM браузера (написав плагин Firefox/IE или что-то еще), я бы, вероятно, поместил все элементы HTML в дерево, а затем сравнил два дерева. Если имя тега другое, то и узел другой. Возможно, вы захотите прекратить перечисление в какой-то момент (вам, вероятно, все равно на диапазон, полужирный шрифт, курсив и т. д. — может быть, вы беспокоитесь только о div?), поскольку некоторые теги на самом деле являются содержимым, а не структурой страница.

Если бы я решил эту проблему, я бы сделал так:

1. Планируйте какой-то DOM для html-страниц. начинается с легкого веса, а затем добавляется по мере необходимости. Я бы использовал составной шаблон для структуры данных. то есть каждый элемент имеет дочернюю коллекцию типа базового класса.
2. Создайте парсер для анализа html-страниц.
3. Используя синтаксический анализатор, загрузите html-элемент в DOM.
4. После того, как страницы загружены в DOM, у вас есть иерархический снимок структуры ваших html-страниц.
5. Продолжайте повторять каждый элемент с обеих сторон до конца DOM. Вы найдете разницу в структуре, когда столкнетесь с несоответствием типа элемента.

В вашем примере у вас будет только объект элемента div, загруженный с одной стороны, с другой стороны у вас будет объект элемента div, загруженный с 1 дочерним элементом элемента абзаца типа. запустите свой итератор, сначала вы сопоставите элемент div, второй итератор вы сопоставите абзац ни с чем. У вас есть структурное отличие.

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

Следующие две разметки функционально идентичны, но будут отображаться как разные, если вы просто сравните теги:

<div id="ctl00_TopNavHome_DivHeader" class="header4">foo</div>
<div class="header4">foo</div>

Я собирался предложить Данималу написать HTML-перевод, который ищет теги HTML и преобразует оба документа в упрощенную версию обоих документов, в которой отсутствуют теги ID и любые другие теги, которые вы считаете неактуальными. Это, вероятно, должно быть незавершенной работой, поскольку вы игнорируете определенные атрибуты/теги, а затем сталкиваетесь с новыми, которые вы также хотите игнорировать.

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

См. http://www.semdesigns.com/Products/SmartDifferencer/index.html для инструмента, который параметризован грамматикой языка и создает дельты с точки зрения языковых элементов (идентификаторов, выражений, операторов, блоков, методов, ...), вставленных, удаленных, перемещенных, замененных или последовательно замененных идентификаторов . Этот инструмент игнорирует переформатирование пробелов (например, разные переводы строк или макеты) и семантически неразличимые значения (например, он знает, что 0x0F и 15 — одно и то же значение). Это можно применить к HTML с помощью парсера HTML.

РЕДАКТИРОВАТЬ: 12.09.2009. Мы создали экспериментальный инструмент SmartDiff с помощью редактора HTML.

http://www.mugo.ca/Products/Dom-Diff

Работает с ФФ 3.5. Я еще не тестировал FF 3.6.

Это было отличное начало. Еще несколько уточнений/комментариев:

• Меня, вероятно, не волнуют идентификаторы, так как .net их искажает
• некоторая часть структуры будет находиться в повторителе или другом подобном элементе управления, поэтому у меня может быть больше или меньше повторяющихся элементов.

Дальнейшая мысль: я думаю, что хорошим началом было бы предположить, что html совместим с XHTML. Затем я мог бы вывести схему (используя новые методы .net XmlSchemaInference), а затем сравнить схемы. Затем я могу посмотреть на различия и решить, существенны они или нет.

Мое предложение - это просто основной способ сделать это... Конечно, для решения проблемы, о которой вы упомянули, здесь должны применяться дополнительные правила... В вашем случае мы получили соответствующий элемент div, а затем примените сопоставление атрибутов/свойств правила, а что нет...

Честно говоря, для сравнения необходимо применять множество сложных правил, и это не просто сопоставление элемента с другим элементом. Например, что произойдет, если у вас есть дубликаты. например 1 элемент div с одной стороны и 2 элемента div с другой стороны. Как вы собираетесь сопоставлять, какие элементы div совпадают друг с другом?

Есть много других сложных вопросов, которые вы найдете в слове сравнения. Я говорю основываясь на опыте (часть моей работы состоит в том, чтобы поддерживать систему сравнения текстов моей компании).

Взгляните на несравненное. Он имеет функцию сравнения XML, которая может вам помочь.

Возможно, вам также придется учитывать, что сам «контент» может содержать дополнительную разметку, поэтому, вероятно, стоит удалить все в определенных элементах (например, <div> с определенными идентификаторами или классами), прежде чем проводить сравнение. Например:

<div id="mainContent">
<p>lorem ipsum etc..</p>
</div>

и

<div id="mainContent">
<p>Here is some real content<img class="someImage" src="someImage.jpg" /></p>
<ul>
<li>and</li>
<li>some</li>
<li>more..</li>
</ul>
</div>

Красавчик Дифф может это сделать. Он будет сравнивать только структуру кода, независимо от различий в пробелах, комментариях или даже содержании. Просто обязательно установите флажок «Нормализовать содержимое и строковые литералы».

http://prettydiff.com/

Я бы использовал (или внес свой вклад) html5lib и его вывод SAX. Просто просмотрите 2 потока SAX в поисках несоответствий и выделите все соответствующее поддерево.

Я не знаю никакого инструмента, но я знаю, что есть простой способ сделать это:

• Во-первых, используйте инструмент регулярных выражений, чтобы удалить весь текст в вашем HTML-файле. Вы можете использовать это регулярное выражение для поиска текста (?<=^|>)[^><]+?(?=<|$) и замены их пустой строкой (""), т.е. удалить весь текст. После этого шага у вас будут все теги разметки HTML. Существует множество бесплатных инструментов для работы с регулярными выражениями.
• Затем вы повторяете первый шаг для исходного HTML-файла.
• Наконец, вы используете инструмент сравнения для сравнения двух наборов HTML-разметок. Это покажет, чего не хватает между одним набором и другим.

Если бы я должен был сделать это, сначала я бы выучил HTML. (^-^) Затем я бы создал инструмент, который удаляет весь фактический контент, а затем сохраняет его в виде файла, чтобы его можно было передать через WinDiff (или другой инструмент слияния).

Откройте каждую страницу в браузере и сохраните их как файлы .htm. Сравните их с помощью Windiff.