У кого-нибудь есть алгоритм diff для визуализации HTML? [закрытый]
Мне интересно увидеть хороший алгоритм diff, возможно, в Javascript, для рендеринга параллельного различия двух HTML-страниц. Идея заключалась бы в том, что diff покажет различия rendered HTML.
чтобы уточнить, я хочу иметь возможность видеть бок о бок диффы как оказал выход. Поэтому, если я удалю абзац, бок о бок вид будет знать, чтобы правильно разместить вещи.
@Джош точно. Хотя, возможно, это было бы показать удаленный текст красным или что-то в этом роде. Идея заключается в том, что если я использую редактор WYSIWYG для своего HTML-контента, я не хочу переключаться на HTML, чтобы делать различия. Я хочу сделать это с двумя редакторами WYSIWYG бок о бок, возможно. Или, по крайней мере, отображать различия бок о бок в удобном для конечного пользователя вопросе.
12 ответов:
есть еще один хороший трюк, который вы можете использовать, чтобы значительно улучшить внешний вид рендеринга HTML diff. Хотя это не полностью решает начальную проблему, это значительно изменит внешний вид ваших отображаемых HTML-различий.
бок о бок визуализированный HTML сделает его очень трудным для вашего diff выстроиться вертикально. Вертикальное выравнивание имеет решающее значение для сравнения бок о бок-различий. Чтобы улучшить вертикальное выравнивание бок о бок diff, вы можете вставьте невидимые HTML-элементы в каждую версию diff на "контрольных точках", где diff должен быть выровнен по вертикали. Затем вы можете использовать немного клиентского JavaScript, чтобы добавить вертикальный интервал вокруг контрольной точки, пока стороны не выровняются по вертикали.
объяснил чуть подробнее:
Если вы хотите использовать эту технику, запустите алгоритм diff и вставьте кучу
visibility:hidden<span>s или tiny<div>s везде, где ваши бок о бок версии должны совпадать, согласно к разнице. Затем запустите JavaScript, который находит каждую контрольную точку (и ее соседний сосед) и добавляет вертикальный интервал к контрольной точке, которая выше (мельче) на странице. Теперь ваш рендеринг HTML diff будет вертикально выровнен до этой контрольной точки, и вы можете продолжить восстановление вертикального выравнивания вниз по остальной части вашей страницы бок о бок.
в выходные я опубликовал новый проект на codeplex, который реализует алгоритм HTML diff в C#. Оригинальный алгоритм был написан на Ruby. Я понимаю, что вы искали реализацию JavaScript, возможно, наличие одного доступного в C# с исходным кодом может помочь вам перенести алгоритм. Вот ссылка, Если вы заинтересованы:htmldiff.codeplex.com. Вы можете прочитать больше об этом здесь.
обновление: эта библиотека переехал в GitHub.
рассмотрите возможность использования вывода ссылок или lynx для визуализации текстовой версии html, а затем diff.
Мне понадобилось что-то подобное некоторое время назад. Чтобы заставить HTML выстраиваться из стороны в сторону, вы можете использовать два iFrames, но затем вам придется связать их прокрутку вместе с помощью javascript при прокрутке (если вы разрешите прокрутку).
чтобы увидеть разницу, однако, вы, скорее всего, захотите использовать чужую библиотеку. Я использовал DaisyDiff, библиотека Java, для аналогичного проекта, Где мой клиент был доволен, увидев один HTML-рендеринг контента С MS Слово "отслеживать изменения" - как разметка.
HTH
а как же DaisyDiff ( Java и PHP версии доступны).
следующие функции действительно хороши:
- работает с плохо сформированным HTML, который можно найти "в дикой природе".
- в сравниваете более специализированных в HTML, чем XML-дерева отличается. Изменение части текстового узла не приведет к изменению всего узла.
- в дополнение к визуальному различию по умолчанию, источник HTML может быть различен связно.
- легко понять, описания изменений.
- графический интерфейс по умолчанию позволяет легко просматривать изменения с помощью сочетаний клавиш и ссылок.
Так, вы ожидаете
<font face="Arial">Hi Mom</font>и
<span style="font-family:Arial;">Hi Mom</span>считать то же самое?
выход очень сильно зависит от агента пользователя. Как Ионут Ангельчович предлагает, сделать образ. Сделайте один для каждого браузера, о котором вы заботитесь.
для небольших различий вы можете сделать обычный текстовый diff, а затем проанализировать отсутствующие или вставленные части, чтобы увидеть, как его решить, но для любых больших различий вам будет очень сложно это сделать.
например, как бы вы обнаружили и показали, что выровненное по левому краю изображение (плавающее слева от абзаца текста) внезапно стало выровненным по правому краю?
Если это XHTML (что предполагает много с моей стороны), поможет ли XML Diff Patch Toolkit? http://msdn.microsoft.com/en-us/library/aa302294.aspx
использование текста differ будет разбиваться на нетривиальные документы. В зависимости от того, что вы считаете интуитивно понятным, XML differs, вероятно, будет генерировать различия, которые не очень хороши для текста с разметкой. Насколько мне известно, DaisyDiff это единственная библиотека, специализирующаяся на HTML. Он отлично работает для подмножества HTML.
Если вы работали с Java и XHTML,XMLUnit позволяет сравнивать два XML-документа через орг.custommonkey.xmlunit.DetailedDiff класс:
сравнивает и описывает все различия между двумя XML-документами. Сравнение документов не прекращается как только первый неисправимый разница, в отличие от разн класс.
Я считаю, что хороший способ сделать это -рендеринг HTML в изображение и затем использовать некоторые diff инструмент, который может сравнивать изображения чтобы определить различия.