Есть ли javascript-библиотеки для создания хорошего структурированного (дерева) diff для HTML?

Question

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

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

Ближе всего я пришел к рабочему решению с помощью библиотек сопоставления google-match-patch (http://code.google.com/p/google-diff-match-patch/). Я применил один из предложенных методов, описанных в wiki, для использования google-match-patch со структурированным контентом (http://code.google.com/p/google-diff-match-patch/wiki/Plaintext), но результаты не совсем правильные. Для справки, вот мой (несколько сырой - я просто тестирование концепции) код: https://gist.github.com/921264

Мой вопрос: Как объяснено на странице выше вики, «Правильное решение заключается в использовании дерева на основе различий , матч и патч ". Может ли кто-нибудь предложить такую ​​библиотеку, написанную на JavaScript?

Я пробовал DaisyDiff (java) и не впечатлил результаты.

---

EDIT: Here is a working jsfiddle для шоу и рассказать!

---

EDIT # 2: ОБМЕН ухаживает: https://github.com/GenuineParts/TableDiff

Answer 1

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

{{0}}, {{1}}, {{2 }} вместо символов Юникода. Это дает гораздо больший объем HTML, который он может поддерживать.