javascript - レンダリングされた HTML の差分アルゴリズムを持っている人はいますか?

Question

2 つの HTML ページの横並びの差分をレンダリングするための、おそらく Javascript の優れた差分アルゴリズムに興味があります。diff は、レンダリングされたHTMLの違いを示すという考えになります。

明確にするために、サイドバイサイドの差分をレンダリングされた出力として表示できるようにしたいと考えています。したがって、段落を削除すると、並べて表示されたビューは物事を正しく配置することを認識します。

@ジョシュ正確に。たぶん、削除されたテキストを赤く表示するか何かで表示します。HTML コンテンツに WYSIWYG エディターを使用する場合、差分を作成するために HTML に切り替える必要はありません。多分2つのWYSIWYGエディターを並べてやりたいです。または、少なくともエンドユーザーにとって使いやすいように、差分を並べて表示します。

score 17 · Accepted Answer

週末に、C# で HTML diff アルゴリズムを実装する新しいプロジェクトを codeplex に投稿しました。オリジナルのアルゴリズムは Ruby で書かれています。JavaScript の実装を探していたとのことですが、C# で利用できるソースコードがあれば、アルゴリズムを移植するのに役立つかもしれません。興味がある場合は、次のリンクを参照してください: htmldiff.codeplex.com。詳細については、こちらをご覧ください。

更新:このライブラリはGitHubに移動されました。

score 17 · Accepted Answer

レンダリングされた HTML 差分の外観を大幅に改善するために使用できる別の優れたトリックがあります。これで最初の問題が完全に解決されるわけではありませんが、レンダリングされた HTML 差分の外観に大きな違いが生じます。

サイドバイサイドでレンダリングされた HTML では、差分を垂直に並べることが非常に難しくなります。横に並べた差分を比較するには、垂直方向の配置が重要です。横に並べた差分の垂直方向の配置を改善するために、差分を垂直方向に配置する必要がある「チェックポイント」で、差分の各バージョンに非表示の HTML 要素を挿入できます。次に、クライアント側の JavaScript を少し使用して、チェックポイントの周囲に垂直方向のスペースを追加し、側面が垂直方向に並ぶようにします。

もう少し詳しく説明します：

この手法を使用する場合は、diff アルゴリズムを実行し、diff に従って、サイドバイサイドのバージョンが一致するはずの場所に一連のvisibility:hidden <span>s または小さなs を挿入します。<div>次に、各チェックポイント (および隣接するチェックポイント) を検出する JavaScript を実行し、ページの上部 (浅い) にあるチェックポイントに垂直方向のスペースを追加します。これで、レンダリングされた HTML 差分がそのチェックポイントまで垂直方向に配置され、残りのサイドバイサイドページで垂直方向の配置を修復し続けることができます。

score 4 · Accepted Answer

しばらく前に似たようなものが必要になりました。HTML を左右に並べるには、2 つの iFrame を使用できますが、スクロールするときに JavaScript を介してそれらのスクロールを結び付ける必要があります (スクロールを許可する場合)。

ただし、差分を表示するには、他の人のライブラリを使用する可能性が高くなります。Java ライブラリのDaisyDiffを同様のプロジェクトに使用しました。クライアントは、MS Word の「変更の追跡」のようなマークアップを含むコンテンツの単一の HTML レンダリングを見て満足していました。

HTH

score 2 · Accepted Answer

DaisyDiffはどうですか( JavaとPHPのバージョンが利用可能です)。

次の機能は本当に素晴らしいです。

「野生」で見つかる可能性のある不適切な形式の HTML で動作します。
差分は、XML ツリーの違いよりも HTML に特化しています。テキストノードの一部を変更しても、ノード全体が変更されるわけではありません。
デフォルトのビジュアル差分に加えて、HTML ソースを首尾一貫して差分することができます。
変更点をわかりやすく説明。
デフォルトの GUI では、キーボードショートカットとリンクを使用して変更を簡単に参照できます。

score 1 · Accepted Answer

だから、あなたは期待します

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

と

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

同じとみなされる？

出力は、ユーザーエージェントに大きく依存します。Ionut Anghelcovici が示唆するように、イメージを作成します。気になるブラウザごとに1つ実行してください。

score 0 · Accepted Answer

JavaとXHTMLを使用していた場合、XMLUnitを使用すると、 org.custommonkey.xmlunit.DetailedDiffクラスを介して2つのXMLドキュメントを比較できます。

2つのXMLドキュメント間のすべての違いを比較して説明します。Diffクラスとは異なり、最初の回復不能な差異が見つかっても、ドキュメントの比較は停止しません。

score 0 · Accepted Answer

テキストの相違を使用すると、重要なドキュメントが壊れます。何が直感的であるかにもよりますが、XML の相違点は、マークアップを含むテキストにはあまり適していない相違点を生成する可能性があります。私の知る限り、DaisyDiffは HTML に特化した唯一のライブラリです。HTML のサブセットに最適です。

score 0 · Accepted Answer

それが XHTML である場合 (これは私の側で多くのことを想定しています)、Xml Diff Patch Toolkit は役に立ちますか? http://msdn.microsoft.com/en-us/library/aa302294.aspx

score 0 · Accepted Answer

違いが小さい場合は、通常のテキスト diff を実行し、欠落または挿入された部分を分析して解決方法を確認できますが、大きな違いがある場合は、これを行うのに非常に苦労することになります。

たとえば、左揃えの画像 (テキストの段落の左に浮いている) が突然右揃えになったことをどのように検出して表示しますか?

score -6 · Accepted Answer

これを行う良い方法は、HTML を画像にレンダリングし、画像を比較して違いを見つけることができる diff ツールを使用することだと思います。

javascript - レンダリングされた HTML の差分アルゴリズムを持っている人はいますか?

12 に答える 12

Related

Reference