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

85

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.

Gehackt
quelle
1
Ist das wirklich von Microsoft gehackt? das Original? : D
Ahmed Khalaf
1
Klingt ähnlich wie diese Frage: stackoverflow.com/questions/1061468/html-compare
rjmunro
2
Alter Faden, aber ich dachte, ich würde meine 2 Cent geben. Ich habe in letzter Zeit viel damit zu tun
gehabt
2
@ Haacked, jemals eine zufriedenstellende Lösung gefunden?
DG.
@ Haacked Eine funktionierende Lösung gefunden? Ich habe es versucht, prettydiff.comaber es sieht so aus, als wäre es kaputt.
Coding_idiot

Antworten:

17

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.

Kamens
quelle
17

Ü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 .

Rohland
quelle
4
Der HTMLDiff Algorithmus wurde in JavaScript (Coffeescript ), portiert hier .
Florian Parain
Hallo @pate, ich glaube, diese Links funktionieren nicht mehr ...
Tiago Cardoso
@TiagoCardoso hat meinen datierten Kommentar gelöscht.
Petrus Theron
@Rohland Super Bibliothek! Wirklich meinen Tag gerettet :)
Sirar Salih
2
@Florian Parain: Danke, dass du den Link zu github.com/tnwinc/htmldiff.js geteilt hast. Es funktioniert großartig! Tipp für alle, die die JS-Version möchten, installieren Sie sie einfach über "npm install htmldiff" und verwenden Sie dann htmldiff.js im Verzeichnis "src".
Elijah Lofgren
4

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

Kooshmoose
quelle
Daisydiff scheint nett
Coding_idiot
4

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

Arafangion
quelle
2

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.
elhoim
quelle
1

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.

Josh
quelle
1

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

http://prettydiff.com/

austincheney
quelle
1
Unterstützt es gerenderte Unterschiede? Ich kann die Option nicht finden.
Joel Peltonen
2
Downvoted, da ich den gerenderten Diff nicht finden konnte.
Tiago Cardoso
0

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?

Lasse V. Karlsen
quelle
0

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.


quelle
0

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.

Ates Goral
quelle
-5

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.


quelle
Jede Fehlausrichtung in diesen beiden Bildern führt natürlich zu massiven Unterschieden, wobei der tatsächliche Unterschied nur winzig ist, wie bei einer Tabelle, die auf einer der beiden Seiten ein Pixel höher ist.
Lasse V. Karlsen