У кого-нибудь есть алгоритм сравнения для визуализированного HTML?

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

Итак, вы ожидаете

<font face = "Arial">Hi Mom</font>

и

<span style = "font-family:Arial;">Hi Mom</span>

считаться таким же?

Результат очень сильно зависит от User Agent. Подобно Ионут Ангелкович предлагает, создайте образ. Сделайте по одному для каждого интересующего вас браузера.

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

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

Объясняется немного подробнее:

Если вы хотите использовать эту технику, запустите свой алгоритм сравнения и вставьте кучу visibility:hidden, <span> или крошечных <div> везде, где должны совпадать ваши параллельные версии, согласно diff. Затем запустите JavaScript, который находит каждую контрольную точку (и ее соседнего соседа) и добавляет вертикальный интервал к контрольной точке, которая находится выше (мельче) на странице. Теперь ваш обработанный HTML-код будет выровнен по вертикали до этой контрольной точки, и вы можете продолжить исправление вертикального выравнивания по остальной части вашей параллельной страницы.

Если это XHTML (который предполагает многое с моей стороны), поможет ли Xml Diff Patch Toolkit? http://msdn.microsoft.com/en-us/library/aa302294.aspx

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

Например, как вы обнаружите и покажете, что выровненное по левому краю изображение (плавающее слева от абзаца текста) внезапно стало выровненным по правому краю?

Некоторое время назад мне понадобилось нечто подобное. Чтобы выровнять HTML бок о бок, вы можете использовать два iFrames, но тогда вам придется связать их прокрутку вместе с помощью javascript при прокрутке (если вы разрешаете прокрутку).

Однако, чтобы увидеть разницу, вы, скорее всего, захотите использовать чужую библиотеку. Я использовал DaisyDiff, библиотеку Java, для аналогичного проекта, в котором мой клиент был доволен, увидев один HTML-рендеринг контента с разметкой, подобной «отслеживанию изменений» в MS Word.

HTH

Использование отличия в тексте нарушит работу нетривиальных документов. В зависимости от того, что вы считаете интуитивно понятным, разные XML, вероятно, будут генерировать различия, которые не очень подходят для текста с разметкой. AFAIK, DaisyDiff - единственная библиотека, специализирующаяся на HTML. Он отлично подходит для подмножества HTML.

Если вы работали с Java и XHTML, XMLUnit позволяет сравнивать два XML-документа через класс org.custommonkey.xmlunit.DetailedDiff:

Compares and describes all the differences between two XML documents. The document comparison does not stop once the first unrecoverable difference is found, unlike the Diff class.

Рассмотрите возможность использования вывода ссылок или lynx для визуализации текстовой версии html, а затем сравните ее.

Используйте режим разметки Pretty Diff для HTML. Он полностью написан на JavaScript.

http://prettydiff.com/

Насчет DaisyDiff (доступны версии Ява и PHP).

Следующие функции действительно хороши:

• Работает с плохо сформированным HTML, который можно найти «в дикой природе».
• Различия более специализированы на HTML, чем на XML-дереве. Изменение части текстового узла не приведет к изменению всего узла.
• В дополнение к визуальному различию по умолчанию, исходный HTML может быть согласован.
• Предоставляет легкие для понимания описания изменений.
• Графический интерфейс пользователя по умолчанию позволяет легко просматривать изменения с помощью сочетаний клавиш и ссылок.

На выходных я опубликовал новый проект на codeplex, который реализует алгоритм HTML diff на C#. Исходный алгоритм был написан на Ruby. Я понимаю, что вы искали реализацию JavaScript, возможно, наличие такой реализации на C# с исходным кодом может помочь вам перенести алгоритм. Вот ссылка, если вам интересно: htmldiff.codeplex.com. Подробнее об этом можно прочитать здесь.

Обновлено: Эта библиотека перемещена в GitHub.