Momentan verwende ich google-diff-match-patch, um ein Echtzeit-Bearbeitungswerkzeug zu implementieren, das Texte zwischen mehreren Benutzern synchronisieren kann. Alles funktioniert gut, wenn Operationen nur einfache Texte sind, kann die Bedienung jedes Benutzers (Hinzufügen / Löschen von Texten) durch Vergleich mit einem alten Text-Schnappschuss mit dem Helfer von Google-diff differiert werden. Aber wenn Rich-Format-Texte (wie fett / kursiv) beteiligt sind, funktioniert Google-diff nicht gut beim Vergleich der htmlstring. Das Auftreten von Zeichen von & lt; und & gt; hat die Diff-Ergebnisse durcheinander gebracht, besonders wenn Fett / Kursiv-Format ineinander eingebettet sind.
Könnte jemand eine ähnliche Bibliothek wie Google-Diff vorschlagen, um Diff-Htlmlstrings? Oder irgendwelche Vorschläge können mein Problem mit Google-diff behoben werden? Ich habe verstanden, dass Google-diff für reinen Text entwickelt wurde, aber wirklich keine bessere Bibliothek als bisher gefunden hat, also funktioniert es auch, wenn eine machbare Erweiterung zu google-diff helfen kann.
Das Wiki im Google-diff-match-patch-Projekt hat einige Ideen. Von Ссылка :
Eine Methode besteht darin, die Tags mit einem einfachen Regex oder Node-Walker aus dem HTML-Code zu entfernen. Dann diff den HTML-Inhalt gegen den Textinhalt. Führen Sie keine Diff-Bereinigungen durch. Dieses Diff ermöglicht das Zuordnen von Zeichenpositionen von einer Version zur anderen (siehe Funktion diff_xIndex). Danach kann man alle gewünschten Patches gegen den Klartext anwenden und dann die Änderungen sicher wieder dem HTML zuordnen. Der Haken bei dieser Technik ist, dass Text zwar frei editiert werden kann, aber HTML-Tags unveränderlich sind.
Eine weitere Methode besteht darin, den HTML-Code zu bearbeiten und jedes öffnende und schließende Tag durch ein Unicode-Zeichen zu ersetzen. Überprüfen Sie die Unicode-Spezifikation für einen Bereich, der nicht verwendet wird. Erstellen Sie während des Prozesses eine Hash-Tabelle mit Unicode-Zeichen für die ursprünglichen Tags. Das Ergebnis ist ein Textblock, der gepatcht werden kann, ohne Angst davor zu haben, Text in ein Tag einzufügen oder die Syntax eines Tags zu brechen. Man muss nur vorsichtig sein, wenn der Inhalt zurück in HTML konvertiert wird, dass keine schließenden Tags verloren gehen.
Ich habe die Vermutung, dass die zweite Idee, map-HTML-tags-to-Unicode-Platzhalter, besser funktionieren könnte, als man es sonst vermuten würde ... vor allem, wenn Ihre HTML-Tags aus einem reduzierten Satz stammen und wenn möglich Führen Sie bei der Anzeige von verschachteltem (durchgestrichen / unterstrichen) Diff-Markup eine kleine Auf / Zu-Bereinigung durch.
Eine andere Methode, die mit einfachem Stil funktionieren könnte, wäre das Entfernen der HTML-Tags, aber denken Sie an die betroffenen Zeichen-Indizes. Zum Beispiel sind "Positionen 8-15 fett". Führen Sie dann einen Klartextvergleich durch. Verwenden Sie abschließend die Position-Mapping-Idee diff_xIndex aus der ersten Methode des Wikis, und fügen Sie HTML-Tags auf intelligente Weise neu ein, um Stylings auf die überlebenden / hinzugefügten Bereiche anzuwenden. (Das heißt, wenn die alten Positionen 8-13 überlebten, aber zu 20-25 verschoben wurden, fügen Sie die B-Tags dort ein.)
Pretty Diff führt alles aus, was Sie brauchen, außer dass Sie die DOM-Antwort aktualisieren müssen, so dass die Diff gegen das "onkeyup" -Ereignis statt auf Knopfdruck ausgelöst wird.
Tags und Links javascript html diff