Czy istnieje biblioteka JS diff przeciwko htmlstringowi, podobnie jak łatka google-diff-match na zwykłym tekście?

Question

Obecnie używam łatki google-diff-match, aby zaimplementować narzędzie do edycji w czasie rzeczywistym, które może synchronizować teksty między wieloma użytkownikami. Wszystko działa wspaniale, gdy operacje są tylko zwykłymi tekstami, operacja każdego użytkownika (dodawanie/usuwanie tekstów) może być zmieniana przez porównanie ze starą migawką tekstu z pomocnikiem google-diff. Ale jeśli chodzi o teksty w formacie bogatym (np. Pogrubienie/kursywa), google-diff nie działa dobrze podczas porównywania htmlstringu. Występowanie znaków <i> doprowadziło do pogorszenia wyników różnic, szczególnie, gdy pogrubienie/kursywa są osadzone w sobie.

Czy ktoś mógłby zaproponować podobną bibliotekę, jak google-diff, aby odróżnić htmlstrings? Lub wszelkie sugestie mogą rozwiązać problem z google-diff? Rozumiem, że google-diff jest przeznaczony do zwykłego tekstu, ale tak naprawdę nie znalazł lepszej biblioteki niż do tej pory, więc działa również, jeśli pomocne jest ulepszenie google-diff.

Answer 1

Spójrz na SynchroEdit, może być przydatny.

Answer 2

Pretty Diff robi wszystko, czego potrzebujesz, z tą różnicą, że będziesz musiał zaktualizować odpowiedź DOM, aby diff odpalał zdarzenie "onkeyup" zamiast kliknięcia przycisku.

http://prettydiff.com/

Answer 3

Wiki w akcji projektowych google-Diff-match-krosowych kilka pomysłów. Od http://code.google.com/p/google-diff-match-patch/wiki/Plaintext:

One method is to strip the tags from the HTML using a simple regex or node-walker. Then diff the HTML content against the text content. Don't perform any diff cleanups. This diff enables one to map character positions from one version to the other (see the diff_xIndex function). After this, one can apply all the patches one wants against the plain text, then safely map the changes back to the HTML. The catch with this technique is that although text may be freely edited, HTML tags are immutable.

Another method is to walk the HTML and replace every opening and closing tag with a Unicode character. Check the Unicode spec for a range that is not in use. During the process, create a hash table of Unicode characters to the original tags. The result is a block of text which can be patched without fear of inserting text inside a tag or breaking the syntax of a tag. One just has to be careful when reconverting the content back to HTML that no closing tags are lost.

Mam przeczucie, że 2nd pomysł, map-html-tags do Unicode zastępcze, może działać lepiej niż można by inaczej odgadnąć ... zwłaszcza jeśli tagi HTML są od trochę zredukowanego zestawu, i jeśli możesz wykonać trochę otwieranie/zamykanie przy wyświetlaniu zinterpretowanych znaczników różnicowych (przekreślony/podkreślony).

Inną metodą, która może działać z prostą stylizacją, byłoby usunięcie znaczników HTML, ale należy pamiętać, że zmieniono indeksy znaków. Na przykład "pozycje 8-15 są pogrubione". Następnie wykonaj różnicę tekstu jawnego. Na koniec, używając pomysłu mapowania pozycji diff_xIndex z pierwszej metody wiki, inteligentnie ponownie wstaw znaczniki HTML, aby ponownie zastosować stylizacje do zakresów zachowanych/dodanych. (To znaczy, jeśli stare pozycje 8-13 przeżył, ale przeniósł się do 20-25, wstaw tagi B wokół tam).

Answer 4

jsdifflib - javascript wizualna Diff Narzędzie & Biblioteka https://github.com/cemerick/jsdifflib

Jest demo tutaj : http://cemerick.github.io/jsdifflib/demo.html