Предложения о том, как создать инструмент HTML Diff?

Question

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

В ветке предлагалось несколько хороших предложений, но не было ничего подходящего. «Хорошо, тогда, - подумал я, - я сам проверну один. Я наполовину приличный разработчик, верно?».

Ну, как только я начал думать об этом, я не мог понять, как это сделать. Я могу достаточно легко запустить веб-сайт, управляемый данными, или внедрить CMS, или добавлять документы в BizTalk и обратно весь день. Не могу понять, как сравнивать документы HTML.

Ну, конечно, я должен прочитать DOM и пройтись по узлам. Я должен сопоставить структуру с некоторой структурой данных (как?), А затем сравнить их (как?). Это задача развития, которую я никогда не пытался выполнить.

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

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

<div class="foo">lorem ipsum<div>

отличается от

<br/><div class="foo"><br/><p>lorem ipsum<p><br/><div>

Answer 1

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

Answer 2

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

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

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

См. предыдущий пост и сопровождающие ответы .

Answer 6

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

http://prettydiff.com/

Answer 7

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