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

Мне интересно увидеть хороший алгоритм сравнения, возможно, в Javascript, для рендеринга параллельного сравнения двух страниц HTML. Идея заключалась бы в том, что разница будет показывать различия отрисованного HTML.

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

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

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

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

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

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

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

ОБНОВЛЕНИЕ: эта библиотека перенесена на GitHub .

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

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

HTH

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

А как насчет DaisyDiff ( доступны версии Java и PHP ).

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

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

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

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

а также

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

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

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

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

http://prettydiff.com/

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

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

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

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

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

Сравнивает и описывает все различия между двумя XML-документами. В отличие от класса Diff сравнение документов не прекращается после обнаружения первого неисправимого различия.

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