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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

Чтобы увидеть diff, вы скорее всего захотите использовать другую библиотеку. Я использовал DaisyDiff, библиотеку Java, для аналогичного проекта, где мой клиент был доволен просмотром одного HTML-рендеринга содержимого с MS Слово "отслеживание изменений" похоже на разметку.

НТН

Ответ 5

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

http://prettydiff.com/

Ответ 6

Как насчет DaisyDiff (Java и PHP vesions доступны).

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

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

Ответ 7

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

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

и

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

чтобы считаться одним и тем же?

Вывод очень сильно зависит от User Agent. Как Ionut Anghelcovici предлагает, сделайте образ. Сделайте это для каждого браузера, о котором вы заботитесь.

Ответ 8

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

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

Ответ 10

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

Ответ 11

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

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