Ma ktoś algorytm diff dla renderowanego HTML ' a? [zamknięte]
Interesuje mnie dobry algorytm różnicowania, prawdopodobnie w Javascript, do renderowania różnic między dwoma stronami HTML. Chodzi o to, że diff pokazuje różnice renderowanego HTML.
Aby wyjaśnić, chcę mieć możliwość wyświetlenia różnic side-by-side jako renderowane wyjście. Więc jeśli usunę akapit, widok obok siebie będzie wiedział, aby spacji rzeczy poprawnie.
@Josh dokładnie. Chociaż może pokazałby skasowany tekst na Czerwono czy coś. Chodzi o to, że jeśli używam edytora WYSIWYG dla mojej zawartości HTML, nie chcę przełączyć się na HTML, aby zrobić diffy. Chcę to zrobić z dwoma edytorami WYSIWYG obok siebie. Albo przynajmniej Wyświetlaj różnice obok siebie w przyjaznej dla użytkownika kwestii.
12 answers
Jest jeszcze jedna fajna sztuczka, której możesz użyć, aby znacznie poprawić wygląd renderowanego różnicowania HTML. Chociaż nie rozwiąże to w pełni początkowego problemu, będzie to miało znaczący wpływ na wygląd renderowanych różnic HTML.
Side-by-side renderowany HTML bardzo utrudni ustawienie Diffa w linii pionowej. Wyrównanie pionowe ma kluczowe znaczenie dla porównywania różnic side-by-side. Aby poprawić wyrównanie pionowe różnicowania obok siebie, można wstawić niewidoczne elementy HTML w każdej wersji różnicy w "punktach kontrolnych", gdzie różnica powinna być wyrównana pionowo. Następnie możesz użyć trochę JavaScript po stronie klienta, aby dodać pionowe odstępy wokół punktu kontrolnego, aż boki ustawią się w pionie.
Wyjaśnione nieco bardziej szczegółowo:
Jeśli chcesz użyć tej techniki, Uruchom algorytm diff i wstaw kilka visibility:hidden <span>s lub tiny <div>S tam, gdzie Twoje wersje obok siebie powinny pasować, zgodnie z diff. Następnie uruchom JavaScript, który znajduje każdy punkt kontrolny (i jego sąsiada obok siebie) i dodaje odstępy pionowe do punktu kontrolnego, który jest wyżej (płytszy) na stronie. Teraz renderowane różnice HTML będą wyrównane pionowo do tego punktu kontrolnego, a Ty możesz kontynuować naprawianie wyrównania pionowego w dół reszty strony obok siebie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-03 03:05:06
W weekend opublikowałem nowy projekt na codeplex, który implementuje algorytm HTML diff w C#. Oryginalny algorytm został napisany w 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 ci w portowaniu algorytmu. Oto link, jeśli jesteś zainteresowany: htmldiff.codeplex.com . więcej na ten temat możesz przeczytać tutaj.
UPDATE: Ta biblioteka została przeniesiona do GitHub .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-04-11 07:08:59
Rozważ użycie wyjścia links lub lynx do renderowania tekstowej wersji html, a następnie diff that.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-12 22:38:43
Kiedyś potrzebowałem czegoś podobnego. Aby uzyskać HTML, aby ustawić się obok siebie, możesz użyć dwóch ramek iframe, ale będziesz musiał związać ich przewijanie razem za pomocą javascript podczas przewijania(jeśli zezwalasz na przewijanie).
Aby zobaczyć diff, będziesz jednak bardziej niż prawdopodobne, że będziesz chciał użyć czyjejś biblioteki. Użyłem DaisyDiff , biblioteki Java, do podobnego projektu, w którym mój klient był zadowolony z pojedynczego renderowania HTML zawartości z MS Word " utwór zmiany " - jak znaczniki.
HTH
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-15 20:20:16
A co z DaisyDiff (Java i PHP dostępne).
Następujące funkcje są naprawdę ładne:
- Działa z źle uformowanym HTML, który można znaleźć "w dziczy".
- diffing jest bardziej wyspecjalizowany w HTML niż w drzewie XML. Zmiana części węzła tekstowego nie spowoduje zmiany całego węzła.
- oprócz domyślnego różnicy wizualnej, źródło HTML może być spójnie zróżnicowane.
- zapewnia łatwy do zrozumieć opisy zmian.
- domyślny GUI umożliwia łatwe przeglądanie modyfikacji za pomocą skrótów klawiaturowych i linków.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-10-20 08:54:27
Użyj trybu znaczników Pretty Diff dla HTML. Jest napisany w całości w języku JavaScript.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-08 22:34:53
Więc spodziewasz się
<font face="Arial">Hi Mom</font>
I
<span style="font-family:Arial;">Hi Mom</span>
Wyjście zależy w dużej mierze od agenta użytkownika. Jak sugeruje Ionut Anghelcovici , zrób obraz. Zrób jeden dla każdej przeglądarki, na której ci zależy.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:54:56
W przypadku mniejszych różnic możesz zrobić normalny text-diff, a następnie przeanalizować brakujące lub wstawione elementy, aby zobaczyć, jak go rozwiązać, ale w przypadku większych różnic będziesz miał bardzo trudny czas.
Na przykład, jak wykryć i pokazać, że obraz wyrównany do lewej strony (unoszący się w lewo od akapitu tekstu) nagle stał się wyrównany do prawej?
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-15 19:45:59
Jeśli jest to XHTML (który zakłada wiele z mojej strony) czy XML Diff Patch Toolkit pomoże? http://msdn.microsoft.com/en-us/library/aa302294.aspx
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-15 19:39:14
Używanie różnic tekstowych złamie się na nietrywialnych dokumentach. W zależności od tego, co uważasz za intuicyjne, XML differs prawdopodobnie wygeneruje różnice, które nie są zbyt dobre dla tekstu ze znacznikami. AFAIK, DaisyDiff jest jedyną biblioteką specjalizującą się w HTML. To działa świetnie dla podzbioru HTML.
Jeśli pracowałeś z Javą i XHTML, XMLUnit pozwala porównać dwa dokumenty XML za pomocą org.custommonkey.xmlunit.DetailedDiff class:
Porównuje i opisuje wszystkie różnice między dwoma dokumentami XML. Porównanie dokumentów nie kończy się po pierwszym nieodwracalnym różnica znajduje się, w przeciwieństwie do Diff klasy.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-05 23:52:43
Uważam, że dobrym sposobem na to jest renderowanie HTML do obrazu , a następnie użycie narzędzia do porównywania obrazów , aby zauważyć różnice.