レンダリングされたHTMLのdiffアルゴリズムを持っている人はいますか？[閉まっている]

2つのHTMLページのdiffを並べてレンダリングするための、おそらくJavascriptでの優れたdiffアルゴリズムを確認することに興味があります。アイデアは、差分がレンダリングされたHTMLの違いを示すということです。

明確にするために、レンダリングされた出力として差分を並べて表示できるようにしたいと思います。したがって、段落を削除すると、並べて表示すると、物事を正しく配置することができます。

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

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

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

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

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

週末に、C＃でHTMLdiffアルゴリズムを実装する新しいプロジェクトをcodeplexに投稿しました。元のアルゴリズムはRubyで書かれていました。JavaScriptの実装を探していたとのことですが、ソースコードを使用してC＃で利用できるようにすると、アルゴリズムの移植に役立つ可能性があります。興味のある方は、htmldiff.codeplex.comへのリンクをご覧ください。あなたはそれについてもっと読むことができます。

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

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

ただし、差分を確認するには、他の誰かのライブラリを使用することをお勧めします。私は、JavaライブラリであるDaisyDiffを同様のプロジェクトに使用しました。このプロジェクトでは、クライアントは、マークアップのようなMSWordの「変更の追跡」を使用してコンテンツの単一のHTMLレンダリングを確認できました。

HTH

リンクまたはlynxの出力を使用して、テキストのみのバージョンのhtmlをレンダリングし、それを比較することを検討してください。

DaisyDiffについてはどうですか（JavaおよびPHPバージョンが利用可能）。

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

• 「野生で」見つけることができるひどく形成されたHTMLで動作します。
• 差分は、XMLツリーが異なるよりもHTMLに特化しています。テキストノードの一部を変更しても、ノード全体は変更されません。
• デフォルトの視覚的な差分に加えて、HTMLソースを一貫して差分することができます。
• 変更の説明をわかりやすく提供します。
• デフォルトのGUIを使用すると、キーボードショートカットとリンクを使用して変更を簡単に参照できます。

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

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

そして

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

同じと見なされますか？

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

HTML用のPrettyDiffのマークアップモードを使用します。それは完全にJavaScriptで書かれています。

http://prettydiff.com/

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

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

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

異なるテキストを使用すると、重要なドキュメントで壊れます。直感的に理解できる内容によっては、XMLが異なると、マークアップのあるテキストにはあまり適していない差分が生成される可能性があります。AFAIK、DaisyDiffはHTMLに特化した唯一のライブラリです。HTMLのサブセットに最適です。

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

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

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