Hat jemand einen Diff-Algorithmus für gerendertes HTML? [geschlossen]

Ich bin daran interessiert, einen guten Diff-Algorithmus zu sehen, möglicherweise in Javascript, um einen Diff von zwei HTML-Seiten nebeneinander zu rendern. Die Idee wäre, dass der Diff die Unterschiede des gerenderten HTML zeigt.

Zur Verdeutlichung möchte ich die nebeneinander liegenden Unterschiede als gerenderte Ausgabe sehen können. Wenn ich also einen Absatz lösche, weiß die Seite an Seite, wie man die Dinge richtig platziert.

@ Josh genau. Obwohl es vielleicht den gelöschten Text in rot oder so zeigen würde. Die Idee ist, dass ich, wenn ich einen WYSIWYG-Editor für meinen HTML-Inhalt verwende, nicht zu HTML wechseln muss, um Unterschiede zu machen. Ich möchte es vielleicht mit zwei WYSIWYG-Editoren nebeneinander machen. Oder zumindest Unterschiede in einer benutzerfreundlichen Angelegenheit nebeneinander anzeigen.

Es gibt noch einen weiteren netten Trick, mit dem Sie das Aussehen eines gerenderten HTML-Diff erheblich verbessern können. Obwohl dies das anfängliche Problem nicht vollständig löst, wird es einen signifikanten Unterschied im Erscheinungsbild Ihrer gerenderten HTML-Unterschiede bewirken.

Nebeneinander gerendertes HTML macht es Ihrem Diff sehr schwer, sich vertikal auszurichten. Die vertikale Ausrichtung ist entscheidend für den Vergleich von Unterschieden nebeneinander. Um die vertikale Ausrichtung eines Side-by-Side-Diff zu verbessern, können Sie unsichtbare HTML-Elemente in jede Version des Diff an "Prüfpunkten" einfügen, an denen das Diff vertikal ausgerichtet werden soll. Anschließend können Sie ein wenig clientseitiges JavaScript verwenden, um vertikale Abstände um den Prüfpunkt hinzuzufü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 visibility:hidden <span>s oder winzigen <div>s ein, wo immer Ihre Side-by-Side-Versionen entsprechend dem Diff übereinstimmen sollten. Führen Sie dann JavaScript aus, das jeden Prüfpunkt (und seinen Nachbarn nebeneinander) findet und dem Prüfpunkt, der höher (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 die vertikale Ausrichtung auf dem Rest Ihrer Seite an Seite weiter reparieren.

Über das Wochenende habe ich ein neues Projekt auf Codeplex veröffentlicht, 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. Wenn Sie möglicherweise eine in C # mit Quellcode verfügbar haben, können Sie den Algorithmus möglicherweise portieren. Hier ist der Link, wenn Sie interessiert sind: htmldiff.codeplex.com . Sie können mehr darüber lesen Sie hier .

UPDATE: Diese Bibliothek wurde nach GitHub verschoben .

Vor einiger Zeit brauchte ich etwas Ähnliches. Um den HTML-Code nebeneinander auszurichten, könnten Sie zwei iFrames verwenden, aber Sie müssten dann das Scrollen beim Scrollen über Javascript zusammenbinden (wenn Sie das Scrollen zulassen).

Um den Unterschied zu sehen, möchten Sie höchstwahrscheinlich die Bibliothek eines anderen Benutzers verwenden. Ich habe DaisyDiff , eine Java-Bibliothek, für ein ähnliches Projekt verwendet, bei dem mein Kunde zufrieden war, ein einziges HTML-Rendering des Inhalts mit MS Word-Markup zu sehen, das Änderungen nachverfolgt.

HTH

Verwenden Sie die Ausgabe von Links oder Luchs, um eine Nur-Text-Version des HTML-Codes zu rendern, und unterscheiden Sie diese dann.

Was ist mit DaisyDiff ( Java- und PHP- Versionen verfügbar).

Folgende Funktionen sind wirklich nett:

• Funktioniert mit schlecht geformtem HTML, das "in the wild" gefunden werden kann.
• Der Unterschied ist spezialisierter auf HTML als der XML-Baum. Wenn Sie einen Teil eines Textknotens ändern, wird nicht der gesamte Knoten geändert.
• Zusätzlich zum standardmäßigen visuellen Unterschied kann die HTML-Quelle kohärent unterschieden werden.
• Bietet leicht verständliche Beschreibungen der Änderungen.
• Die Standard-GUI ermöglicht das einfache Durchsuchen der Änderungen über Tastaturkürzel und Links.

Sie erwarten es also

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

und

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

gleich zu sein?

Die Ausgabe hängt stark vom User Agent ab. Machen Sie ein Bild, wie Ionut Anghelcovici vorschlägt . Machen Sie einen für jeden Browser, den Sie interessieren.

Verwenden Sie den Markup-Modus von Pretty Diff für HTML. Es ist vollständig in JavaScript geschrieben.

http://prettydiff.com/

Wenn es sich um XHTML handelt (was meinerseits 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 ein normales Textdiff erstellen und dann die fehlenden oder eingefügten Teile analysieren, um festzustellen, wie es behoben werden kann. Bei größeren Unterschieden wird es Ihnen jedoch sehr schwer fallen, dies zu tun.

Wie würden Sie beispielsweise erkennen und zeigen, dass ein linksbündiges Bild (links von einem Textabsatz schwebend) plötzlich rechtsbündig geworden ist?

Die Verwendung eines unterschiedlichen Textes wird bei nicht trivialen Dokumenten unterbrochen. Je nachdem, was Sie für intuitiv halten, führen XML-Unterschiede wahrscheinlich zu Unterschieden, die für Text mit Markup nicht sehr gut sind. AFAIK, 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, können Sie mit XMLUnit zwei XML-Dokumente über die Klasse org.custommonkey.xmlunit.DetailedDiff vergleichen :

Vergleicht und beschreibt alle Unterschiede zwischen zwei XML-Dokumenten. Der Dokumentvergleich wird im Gegensatz zur Diff-Klasse nicht beendet, sobald der erste nicht behebbare Unterschied gefunden wurde.

Ich glaube, ein guter Weg, dies zu tun, besteht darin , den HTML-Code in ein Bild zu rendern und dann ein Diff-Tool zu verwenden, mit dem Bilder verglichen werden können, um die Unterschiede zu erkennen.