Хто-небудь має різний алгоритм для відображеного HTML? [зачинено]

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

Щоб пояснити, я хочу мати можливість бачити паралельні відмінності як виведений результат. Отже, якщо я видалю абзац, вид збоку буде знати, як правильно розміщувати речі.

@Josh точно. Хоча, можливо, він буде відображати видалений текст червоним кольором або щось інше. Ідея полягає в тому, що якщо я використовую редактор WYSIWYG для свого вмісту HTML, я не хочу переходити на HTML, щоб робити відмінності. Я хочу зробити це за допомогою двох редакторів WYSIWYG, поруч, можливо. Або, принаймні, дисплей відрізняється поруч у зручному для кінцевого користувача питанні.

Існує ще одна приємна хитрість, яку ви можете використати, щоб значно покращити вигляд відображеної HTML-різниці. Незважаючи на те, що це не повністю вирішує початкову проблему, це суттєво вплине на зовнішній вигляд ваших відтворених HTML-відмінностей.

Паралельно відтворений HTML дуже ускладнить для вашого дифузійного вирівнювання по вертикалі. Вертикальне вирівнювання має вирішальне значення для порівняння різниць поруч. Для того, щоб поліпшити вертикальне вирівнювання паралельної різниці, ви можете вставити невидимі елементи HTML у кожну версію різниці в "контрольних точках", де різниця повинна бути вертикально вирівняна. Тоді ви можете використовувати трохи клієнтського JavaScript, щоб додати вертикальний інтервал навколо контрольної точки, поки сторони не вирівняються вертикально.

Пояснено трохи детальніше:

Якщо ви хочете скористатися цією технікою, запустіть свій алгоритм різниці та вставте купу visibility:hidden <span>s або крихітних <div>s туди, де ваші паралельні версії повинні збігатися, відповідно до різниці. Потім запустіть JavaScript, який знаходить кожну контрольну точку (та її сусіднього сусіда) і додає вертикальний інтервал до контрольної точки, що знаходиться вище (меншою мірою) на сторінці. Тепер ваша відтворена різниця HTML буде вирівняна вертикально до цієї контрольної точки, і ви зможете продовжувати відновлювати вертикальне вирівнювання вниз по решті вашої сторони поруч.

На вихідних я опублікував новий проект на codeplex, який реалізує алгоритм різниці HTML у C #. Оригінальний алгоритм був написаний на Ruby. Я розумію, що ви шукали реалізацію JavaScript, можливо, наявність такої в C # із вихідним кодом може допомогти вам перенести алгоритм. Ось посилання, якщо вам цікаво: htmldiff.codeplex.com . Детальніше про це ви можете прочитати тут .

ОНОВЛЕННЯ: Цю бібліотеку переміщено до GitHub .

Я закінчився потребуючим щось подібне деякий час назад. Щоб HTML вирівнявся вбік, ви можете використовувати два iFrames, але тоді вам доведеться пов’язати їх прокрутку за допомогою JavaScript під час прокрутки (якщо ви дозволяєте прокрутку).

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

HTH

Подумайте про використання виводу посилань або lynx для рендерингу текстової версії html, а потім різнице це.

Що можна сказати про DaisyDiff ( доступні версії Java та PHP ).

Наступні особливості дуже приємні:

• Працює з погано сформованим HTML, який можна знайти "в дикій природі".
• Diffing спеціалізується на HTML, ніж дерево XML. Зміна частини текстового вузла не призведе до зміни всього вузла.
• На додаток до візуальної різниці за замовчуванням, джерело HTML може відрізнятися узгоджено.
• Надає зручні для розуміння описи змін.
• Графічний інтерфейс за замовчуванням дозволяє легко переглядати модифікації за допомогою комбінацій клавіш та посилань.

Отже, ви очікуєте

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

і

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

вважати однаковим?

Результат дуже залежить від Агента користувача. Як пропонує Іонут Ангелковічі , зробіть образ. Зробіть по одному для кожного браузера, який вам важливий.

Використовуйте режим розмітки Pretty Diff для HTML. Це повністю написано на JavaScript.

http://prettydiff.com/

Якщо це XHTML (який передбачає багато чого з мого боку), чи допоможе набір інструментів виправлення Xml Diff? http://msdn.microsoft.com/en-us/library/aa302294.aspx

Для менших відмінностей ви можете зробити звичайну різницю тексту, а потім проаналізувати відсутні або вставлені фрагменти, щоб побачити, як їх вирішити, але для більших відмінностей вам доведеться дуже важко це зробити.

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

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

Якщо ви працювали з Java та XHTML, XMLUnit дозволяє порівняти два XML-документи за допомогою класу org.custommonkey.xmlunit.DetailedDiff :

Порівнює та описує всі відмінності між двома документами XML. Порівняння документів не припиняється після виявлення першої непоправної різниці, на відміну від класу Diff.

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