У кого-нибудь есть алгоритм diff для рендеринга HTML?[закрыто]
https://stackoverflow.com/questions/31722
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Мне интересно увидеть хороший алгоритм diff, возможно, в Javascript, для рендеринга параллельного diff двух HTML-страниц.Идея заключалась бы в том, что diff показывал бы различия между визуализированный HTML.
Чтобы внести ясность, я хочу иметь возможность видеть параллельные различия как визуализированный результат.Таким образом, если я удалю абзац, вид сбоку будет знать, как правильно расставить все по местам.
@Джош, именно так.Хотя, возможно, это выделило бы удаленный текст красным цветом или что-то в этом роде.Идея заключается в том, что если я использую редактор WYSIWYG для своего HTML-контента, я не хочу переключаться на HTML для выполнения различий.Возможно, я хочу сделать это с помощью двух редакторов WYSIWYG бок о бок.Или, по крайней мере, отображать различия бок о бок в удобном для конечного пользователя виде.
Решение
Есть еще один приятный трюк, который вы можете использовать, чтобы значительно улучшить внешний вид отображаемого HTML-diff.Хотя это не полностью решит первоначальную проблему, это существенно изменит внешний вид ваших отрисованных HTML-различий.
Параллельный рендеринг HTML очень затруднит выстраивание вашего diff по вертикали.Вертикальное выравнивание имеет решающее значение для сравнения параллельных различий.Чтобы улучшить выравнивание по вертикали параллельного diff, вы можете вставлять невидимые HTML-элементы в каждую версию diff на "контрольных точках", где diff должен быть выровнен по вертикали.Затем вы можете использовать немного клиентского JavaScript, чтобы добавить вертикальный интервал вокруг контрольной точки до тех пор, пока стороны не выровняются по вертикали.
Объяснено чуть более подробно:
Если вы хотите использовать этот метод, запустите свой алгоритм diff и вставьте кучу visibility:hidden <span>s или крошечный <div>s везде, где ваши параллельные версии должны совпадать в соответствии с различием.Затем запустите JavaScript, который найдет каждую контрольную точку (и ее соседних соседей) и добавит вертикальный интервал к контрольной точке, которая находится выше (мельче) на странице.Теперь ваш отрисованный HTML-diff будет выровнен по вертикали до этой контрольной точки, и вы сможете продолжить восстановление вертикального выравнивания по остальной части вашей параллельной страницы.
Другие советы
В минувшие выходные я опубликовал новый проект на codeplex, который реализует алгоритм HTML diff на C #.Оригинальный алгоритм был написан на Ruby.Я понимаю, что вы искали реализацию на JavaScript, возможно, наличие такой реализации на C # с исходным кодом могло бы помочь вам перенести алгоритм.Вот ссылка, если вам интересно: htmldiff.codeplex.com.Вы можете прочитать об этом подробнее здесь.
Обновить: Эта библиотека была перенесена в ГитХаб.
В итоге некоторое время назад мне понадобилось нечто подобное.Чтобы заставить HTML выстраиваться из стороны в сторону, вы могли бы использовать два IFRAME, но тогда вам пришлось бы связать их прокрутку вместе с помощью javascript при прокрутке (если вы разрешаете прокрутку).
Однако, чтобы увидеть разницу, вы, скорее всего, захотите воспользоваться чьей-то другой библиотекой.Я использовал ДейсиДифф, библиотека Java, для аналогичного проекта, где мой клиент был доволен, увидев единый HTML-рендеринг содержимого с разметкой, подобной MS Word "отслеживать изменения".
HTH
Рассмотрите возможность использования выходных данных links или lynx для рендеринга текстовой версии html, а затем измените ее.
О чем ДейсиДифф (Java и PHP доступные варианты).
Следующие функции действительно приятны:
- Работает с плохо сформированным HTML, который можно найти "в дикой природе".
- Различие больше специализировано на HTML, чем отличается XML-дерево.Изменение части текстового узла не приведет к изменению всего узла целиком.
- В дополнение к визуальному различию по умолчанию, исходный код HTML может быть согласованно изменен.
- Содержит простые для понимания описания изменений.
- Графический интерфейс по умолчанию позволяет легко просматривать изменения с помощью сочетаний клавиш и ссылок.
Итак, вы ожидаете
<font face="Arial">Hi Mom</font>
и
<span style="font-family:Arial;">Hi Mom</span>
чтобы их считали такими же?
Результат очень сильно зависит от пользовательского агента.Нравится Ионут Ангелькович предлагает, создайте изображение.Сделайте по одному для каждого браузера, который вам интересен.
Используйте режим разметки Pretty Diff для HTML.Он полностью написан на JavaScript.
Если это XHTML (что предполагает многое с моей стороны), поможет ли Xml Diff Patch Toolkit? http://msdn.microsoft.com/en-us/library/aa302294.aspx
Для небольших различий вы могли бы выполнить обычное текстовое различие, а затем проанализировать отсутствующие или вставленные фрагменты, чтобы увидеть, как это устранить, но для любых больших различий вам будет очень сложно это сделать.
Например, как бы вы обнаружили и показали, что выровненное по левому краю изображение (плавающее слева от абзаца текста) внезапно стало выровненным по правому краю?
Использование текстового различия приведет к сбою в работе с нетривиальными документами.В зависимости от того, что вы считаете интуитивно понятным, XML differences, вероятно, будет генерировать различия, которые не очень хороши для текста с разметкой.АФАИК, ДейсиДифф это единственная библиотека, специализирующаяся на HTML.Это отлично работает для подмножества HTML.
Если бы вы работали с Java и XHTML, XMLUnit ( Модуль XMLUnit ) позволяет сравнивать два XML-документа с помощью org.custommonkey.xmlunit.Подробный DIFF класс:
Сравнивает и описывает все различия между двумя XML-документами.Сравнение документов не прекращается после обнаружения первого неустранимого различия, в отличие от класса Diff .
Я считаю, что хороший способ сделать это - это визуализируйте HTML-код в изображение а затем используйте некоторые инструмент diff, который может сравнивать изображения чтобы выявить различия.
