Czy ktoś ma algorytm różnicowy dla renderowanego kodu HTML? [Zamknięte]

Jestem zainteresowany obejrzeniem dobrego algorytmu różnicowania, prawdopodobnie w Javascript, do renderowania porównania dwóch stron HTML obok siebie. Pomysł byłby taki, że różnica pokazywałaby różnice w renderowanym HTMLu.

Aby wyjaśnić, chcę móc zobaczyć różnice obok siebie jako renderowane dane wyjściowe. Więc jeśli usunę akapit, widok obok siebie będzie wiedział, jak prawidłowo rozmieścić elementy.

@Josh dokładnie. Chociaż może to pokaże usunięty tekst na czerwono czy coś. Chodzi o to, że jeśli używam edytora WYSIWYG do mojej zawartości HTML, nie chcę przełączać się na HTML, aby robić różnice. Chcę to zrobić może z dwoma edytorami WYSIWYG obok siebie. Lub przynajmniej wyświetlaj różnice obok siebie w sposób przyjazny dla użytkownika końcowego.

Jest jeszcze jedna fajna sztuczka, której możesz użyć, aby znacznie poprawić wygląd renderowanego pliku różnicowego HTML. Chociaż nie rozwiązuje to w pełni początkowego problemu, spowoduje znaczącą różnicę w wyglądzie renderowanych plików różnicowych HTML.

HTML renderowany obok siebie bardzo utrudni wyrównanie w pionie. Wyrównanie w pionie ma kluczowe znaczenie przy porównywaniu różnic obok siebie. Aby poprawić wyrównanie w pionie porównania obok siebie, możesz wstawić niewidoczne elementy HTML do każdej wersji porównania w „punktach kontrolnych”, w których różnica powinna być wyrównana w pionie. Następnie możesz użyć trochę JavaScript po stronie klienta, aby dodać pionowe odstępy wokół punktu kontrolnego, aż boki zrównają się w pionie.

Wyjaśnione nieco bardziej szczegółowo:

Jeśli chcesz użyć tej techniki, uruchom algorytm porównywania i wstaw kilka visibility:hidden <span>s lub małych <div>s tam, gdzie powinny pasować wersje obok siebie, zgodnie z różnicami. Następnie uruchom JavaScript, który znajduje każdy punkt kontrolny (i jego sąsiada obok siebie) i dodaje pionowe odstępy do punktu kontrolnego znajdującego się wyżej (płytszego) na stronie. Teraz wyrenderowany plik różnicowy HTML zostanie wyrównany w pionie do tego punktu kontrolnego i możesz kontynuować naprawianie wyrównania w pionie w dół na pozostałej części strony obok siebie.

W weekend opublikowałem nowy projekt na codeplex, który implementuje algorytm różnicowania HTML w C #. Oryginalny algorytm został napisany w języku Ruby. Rozumiem, że szukałeś implementacji JavaScript, być może posiadanie takiej dostępnej w C # z kodem źródłowym może pomóc w przeniesieniu algorytmu. Oto link, jeśli jesteś zainteresowany: htmldiff.codeplex.com . Więcej na ten temat przeczytasz tutaj .

AKTUALIZACJA: ta biblioteka została przeniesiona do GitHub .

Skończyło się na tym, że jakiś czas temu potrzebowałem czegoś podobnego. Aby kod HTML ustawiał się w jednej linii z jednej strony na drugą, możesz użyć dwóch ramek iFrame, ale wtedy będziesz musiał powiązać ich przewijanie za pomocą javascript podczas przewijania (jeśli zezwolisz na przewijanie).

Aby zobaczyć różnicę, najprawdopodobniej będziesz chciał skorzystać z biblioteki innej osoby. Użyłem DaisyDiff , biblioteki Java, do podobnego projektu, w którym mój klient był zadowolony, widząc pojedyncze renderowanie zawartości HTML za pomocą znaczników „śledź zmiany” w programie MS Word.

HTH

Rozważ użycie danych wyjściowych linków lub lynx do renderowania wersji tekstowej HTML, a następnie porównaj to.

A co z DaisyDiff ( Java i PHP dostępne wersje ).

Następujące funkcje są naprawdę fajne:

• Działa ze źle sformułowanym kodem HTML, który można znaleźć „na wolności”.
• Różnice są bardziej wyspecjalizowane w HTML niż drzewo XML. Zmiana części węzła tekstowego nie spowoduje zmiany całego węzła.
• Oprócz domyślnych różnic wizualnych, źródła HTML mogą być spójnie porównywane.
• Zawiera łatwe do zrozumienia opisy zmian.
• Domyślne GUI umożliwia łatwe przeglądanie modyfikacji za pomocą skrótów klawiaturowych i łączy.

Więc oczekujesz

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

i

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

być uważanym za to samo?

Wynik zależy w dużym stopniu od agenta użytkownika. Jak sugeruje Ionut Anghelcovici , zrób zdjęcie. Zrób po jednym dla każdej przeglądarki, na której Ci zależy.

Użyj trybu znaczników Pretty Diff dla HTML. Jest napisany w całości w JavaScript.

http://prettydiff.com/

Jeśli jest to XHTML (co zakłada wiele z mojej strony), czy zestaw narzędzi Xml Diff Patch Toolkit pomoże? http://msdn.microsoft.com/en-us/library/aa302294.aspx

W przypadku mniejszych różnic możesz wykonać normalne porównywanie tekstu, a następnie przeanalizować brakujące lub wstawione elementy, aby zobaczyć, jak to rozwiązać, ale w przypadku większych różnic będziesz miał bardzo trudny czas, aby to zrobić.

Na przykład, jak można wykryć i pokazać, że obraz wyrównany do lewej (unoszący się na lewo od akapitu tekstu) nagle stał się wyrównany do prawej?

Użycie innego tekstu spowoduje przerwanie nietrywialnych dokumentów. W zależności od tego, co uważasz za intuicyjne, różnice w XML-u prawdopodobnie wygenerują różnice, które nie są zbyt dobre dla tekstu ze znacznikami. AFAIK, DaisyDiff jest jedyną biblioteką specjalizującą się w HTML. Działa świetnie w przypadku podzbioru kodu HTML.

Jeśli pracujesz z Javą i XHTML, XMLUnit umożliwia porównanie dwóch dokumentów XML za pośrednictwem klasy org.custommonkey.xmlunit.DetailedDiff :

Porównuje i opisuje wszystkie różnice między dwoma dokumentami XML. Porównanie dokumentów nie kończy się po znalezieniu pierwszej nieodwracalnej różnicy, w przeciwieństwie do klasy Diff.

Uważam, że dobrym sposobem na zrobienie tego jest wyrenderowanie kodu HTML do obrazu, a następnie użycie narzędzia porównywania, które może porównać obrazy w celu wykrycia różnic.