Hat jemand einen Diff-Algorithmus für gerendertes HTML?[geschlossen]
https://stackoverflow.com/questions/31722
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich bin daran interessiert, einen guten Diff-Algorithmus, möglicherweise in Javascript, zum Rendern eines Diffs zweier HTML-Seiten nebeneinander zu sehen.Die Idee wäre, dass der Diff die Unterschiede der anzeigen würde gerendert HTML.
Zur Verdeutlichung möchte ich die Unterschiede nebeneinander sehen können als gerenderte Ausgabe.Wenn ich also einen Absatz lösche, erkennt die Nebeneinanderansicht, dass die Abstände korrekt sind.
@Josh genau.Allerdings würde es vielleicht den gelöschten Text in Rot oder so anzeigen.Die Idee ist, dass ich, wenn ich einen WYSIWYG-Editor für meinen HTML-Inhalt verwende, nicht zu HTML wechseln muss, um Unterschiede zu erstellen.Ich möchte es vielleicht mit zwei WYSIWYG-Editoren nebeneinander machen.Oder zumindest die Unterschiede auf benutzerfreundliche Weise nebeneinander anzeigen.
Lösung
Es gibt noch einen weiteren netten Trick, mit dem Sie das Aussehen eines gerenderten HTML-Diff deutlich verbessern können.Obwohl dies das ursprüngliche Problem nicht vollständig löst, wird es einen erheblichen Unterschied im Erscheinungsbild Ihrer gerenderten HTML-Unterschiede bewirken.
Durch nebeneinander gerendertes HTML wird es für Ihr Diff sehr schwierig sein, es vertikal auszurichten.Die vertikale Ausrichtung ist entscheidend für den Vergleich nebeneinander liegender Unterschiede.Um die vertikale Ausrichtung eines Side-by-Side-Diffs zu verbessern, können Sie unsichtbare HTML-Elemente in jede Version des Diffs an „Kontrollpunkten“ einfügen, an denen das Diff vertikal ausgerichtet sein soll.Dann können Sie mit etwas clientseitigem JavaScript vertikale Abstände um den Prüfpunkt herum hinzufügen, bis die Seiten vertikal ausgerichtet sind.
Etwas ausführlicher erklärt:
Wenn Sie diese Technik verwenden möchten, führen Sie Ihren Diff-Algorithmus aus und fügen Sie eine Reihe von ein visibility:hidden <span>s oder winzig <div>Es liegt an der Stelle, an der Ihre Side-by-Side-Versionen je nach Diff übereinstimmen sollten.Führen Sie dann JavaScript aus, das jeden Prüfpunkt (und seinen nebeneinander liegenden Nachbarn) findet und dem Prüfpunkt, der weiter oben (flacher) auf der Seite liegt, einen vertikalen Abstand hinzufügt.Jetzt wird Ihr gerendertes HTML-Diff bis zu diesem Prüfpunkt vertikal ausgerichtet, und Sie können mit der Reparatur der vertikalen Ausrichtung entlang des Rests Ihrer Seite nebeneinander fortfahren.
Andere Tipps
Am Wochenende habe ich auf Codeplex ein neues Projekt gepostet, das einen HTML-Diff-Algorithmus in C# implementiert.Der ursprüngliche Algorithmus wurde in Ruby geschrieben.Ich verstehe, dass Sie nach einer JavaScript-Implementierung gesucht haben. Vielleicht könnte Ihnen die Verfügbarkeit einer in C# mit Quellcode dabei helfen, den Algorithmus zu portieren.Hier ist der Link, falls Sie interessiert sind: htmldiff.codeplex.com.Sie können mehr darüber lesen Hier.
AKTUALISIEREN: Diese Bibliothek wurde verschoben GitHub.
Vor einiger Zeit brauchte ich etwas Ähnliches.Um den HTML-Code nebeneinander auszurichten, könnten Sie zwei iFrames verwenden, aber Sie müssten dann deren Bildlauf beim Scrollen über Javascript miteinander verknüpfen (sofern Sie das Scrollen zulassen).
Um den Unterschied zu sehen, werden Sie jedoch höchstwahrscheinlich die Bibliothek einer anderen Person verwenden wollen.ich benutzte DaisyDiff, eine Java-Bibliothek, für ein ähnliches Projekt, bei dem mein Kunde zufrieden war, eine einzige HTML-Darstellung des Inhalts mit MS Word-ähnlichem Markup zum „Tracking von Änderungen“ zu sehen.
HTH
Erwägen Sie, die Ausgabe von Links oder Lynx zu verwenden, um eine Nur-Text-Version des HTML-Codes zu rendern, und vergleichen Sie diese dann.
Wie wäre es mit DaisyDiff (Java Und PHP Versionen verfügbar).
Folgende Features sind wirklich nett:
- Funktioniert mit schlecht geformtem HTML, das „in freier Wildbahn“ zu finden ist.
- Das Diffing ist auf HTML spezialisierter als auf XML-Baum-Differenzen.Das Ändern eines Teils eines Textknotens führt nicht dazu, dass der gesamte Knoten geändert wird.
- Zusätzlich zum standardmäßigen visuellen Diff kann die HTML-Quelle kohärent unterschieden werden.
- Bietet leicht verständliche Beschreibungen der Änderungen.
- Die Standard-GUI ermöglicht ein einfaches Durchsuchen der Änderungen über Tastaturkürzel und Links.
Sie erwarten also
<font face="Arial">Hi Mom</font>
Und
<span style="font-family:Arial;">Hi Mom</span>
als gleich angesehen werden?
Die Ausgabe hängt stark vom User Agent ab.Wie Ionut Anghelcovici schlägt vor, mach ein Bild.Machen Sie einen für jeden Browser, der Ihnen wichtig ist.
Verwenden Sie den Markup-Modus von Pretty Diff für HTML.Es ist vollständig in JavaScript geschrieben.
Wenn es sich um XHTML handelt (was von meiner Seite viel voraussetzt), würde das Xml Diff Patch Toolkit helfen? http://msdn.microsoft.com/en-us/library/aa302294.aspx
Bei kleineren Unterschieden können Sie möglicherweise einen normalen Textunterschied durchführen und dann die fehlenden oder eingefügten Teile analysieren, um zu sehen, wie Sie das Problem beheben können. Bei größeren Unterschieden wird dies jedoch sehr schwierig sein.
Wie würden Sie beispielsweise erkennen und zeigen, dass ein linksbündig ausgerichtetes Bild (das sich links von einem Textabsatz befindet) plötzlich rechtsbündig ausgerichtet ist?
Die Verwendung eines Textunterschieds führt bei nicht trivialen Dokumenten zu Fehlern.Je nachdem, was Ihrer Meinung nach intuitiv ist, werden XML-Unterschiede wahrscheinlich Unterschiede erzeugen, die für Text mit Markup nicht sehr gut sind.SO VIEL ICH WEISS, DaisyDiff ist die einzige auf HTML spezialisierte Bibliothek.Es funktioniert hervorragend für eine Teilmenge von HTML.
Wenn Sie mit Java und XHTML gearbeitet haben, XMLUnit ermöglicht den Vergleich zweier XML-Dokumente über das org.custommonkey.xmlunit.DetailedDiff Klasse:
Vergleicht und beschreibt alle Unterschiede zwischen zwei XML -Dokumenten.Der Dokumentenvergleich hört nicht auf Sobald die erste nicht wiederherstellbare Differenz gefunden wird, im Gegensatz zum Diff Klasse.
Ich glaube, ein guter Weg, dies zu tun, besteht darin, Folgendes zu tun: Rendern Sie den HTML-Code in ein Bild und dann etwas verwenden Diff-Tool, das Bilder vergleichen kann um die Unterschiede zu erkennen.
