Различаются два фрагмента HTML: структурные, а не строки / символы? - PullRequest
Новая
       3

Различаются два фрагмента HTML: структурные, а не строки / символы?

8 голосов
/ 12 августа 2011

Я ищу движок различий JavaScript, который будет возвращать разницу в структуре двух фрагментов HTML.То есть вместо «в этой строке, в том или ином символе что-то произошло», это будет «этот элемент был вставлен после этого элемента», или «этот элемент был удален», или «этот текстовый узел былизменено "и т. д.

Краткие исследования показывают, это сложно .

Конкретный сценарий заключается в том, что у меня есть предварительный просмотр текстового редактора Markdown.Он хорошо работает только с текстом, но как только пользователь публикует, скажем, встраивание YouTube <iframe>, он рендерится / перезагружается при каждом нажатии клавиши, что нелепо дорого.Большие изображения также сложны, потому что они вызывают тошнотворный эффект дрожания при загрузке из кэша (по крайней мере, в WebKit).

Что было бы прекрасно, так это замена jQuery.html(), которая вместо простой заменыСодержимое HTML фактически сравнивало старое с новым и выборочно обновлялось / вставлялось / добавлялось, так что неизмененные элементы оставались в покое.

1 Ответ

1 голос
/ 14 августа 2011
  1. Глубокое клонирование (через node.cloneNode(true)) обоих узлов, если они используются в данный момент (то есть, если в вашем JavaScript есть ссылки на какие-либо дочерние узлы).
  2. Нормализовать оба узла с помощью node.normalize().
  3. Выполните итерацию по каждому дочернему узлу обоих узлов и сравните с node.isEqualNode(other_node).
  4. Для каждого неравного узла итерируйте глубже, чтобы увидеть, можете ли вы найти какие-либо равные дочерние узлы.

Если честно, вам гораздо лучше использовать текстовую библиотеку различий вместо создания собственной библиотеки различий на основе DOM.

...