レンダリングされた HTML の差分アルゴリズムを持っている人はいますか?[閉まっている]
https://stackoverflow.com/questions/31722
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私は、おそらく JavaScript で、2 つの HTML ページの並べて差分をレンダリングするための優れた差分アルゴリズムを知りたいと考えています。diff は、 レンダリングされた HTML。
明確にするために、差分を並べて表示できるようにしたいのです として レンダリングされた出力。したがって、段落を削除すると、並べて表示すると、項目の間隔が正しく配置されることがわかります。
@ジョシュまさに。削除されたテキストが赤か何かで表示されるかもしれませんが。HTML コンテンツに WYSIWYG エディタを使用する場合、差分を行うために HTML に切り替える必要がなくなるという考えです。おそらく 2 つの WYSIWYG エディタを並べて実行したいと考えています。あるいは、エンドユーザーにわかりやすいように、少なくとも差分を並べて表示します。
解決
レンダリングされた HTML の差分の外観を大幅に改善するために使用できるもう 1 つの優れたトリックがあります。これによって最初の問題が完全に解決されたわけではありませんが、レンダリングされた HTML の差分の外観に大きな違いが生じます。
HTML を並べてレンダリングすると、差分を垂直に並べるのが非常に困難になります。垂直方向の位置合わせは、差分を並べて比較する場合に重要です。並べて表示した差分の垂直方向の配置を改善するには、差分を垂直方向に配置する必要がある「チェックポイント」の各バージョンの差分に、非表示の HTML 要素を挿入できます。次に、クライアント側の JavaScript を少し使用して、辺が垂直に揃うまでチェックポイントの周囲に垂直方向のスペースを追加します。
もう少し詳しく説明すると、
この手法を使用したい場合は、diff アルゴリズムを実行して、大量のデータを挿入します。 visibility:hidden <span>または小さい <div>s 差分に従って、並列バージョンが一致する必要がある場所。次に、JavaScript を実行して、各チェックポイント (およびその隣り合うチェックポイント) を検索し、ページの上部 (浅い) のチェックポイントに垂直方向のスペースを追加します。これで、レンダリングされた HTML の差分はそのチェックポイントまで垂直方向に整列され、残りの並列ページで垂直方向の整列の修復を続けることができます。
他のヒント
週末、私は C# で HTML diff アルゴリズムを実装する新しいプロジェクトを codeplex に投稿しました。元のアルゴリズムは Ruby で書かれました。JavaScript の実装をお探しだったとのことですが、ソース コードとともに C# で利用できるものがあると、アルゴリズムの移植に役立つ可能性があります。ご興味がございましたら、こちらのリンクをご覧ください。 htmldiff.codeplex.com. 。詳細についてはこちらをご覧ください ここ.
アップデート： このライブラリはに移動されました GitHub.
しばらく前に似たようなものが必要になりました。HTML を左右に並べるには、2 つの iFrame を使用できますが、スクロールするときに JavaScript を使用してそれらのスクロールを結合する必要があります (スクロールを許可している場合)。
ただし、差分を確認するには、他の人のライブラリを使用することになるでしょう。私が使用した デイジーディフ, 、同様のプロジェクト用の Java ライブラリです。クライアントは、MS Word の「変更の追跡」のようなマークアップを使用したコンテンツの 1 つの HTML レンダリングを確認して満足していました。
HTH
リンクまたは lynx の出力を使用して html のテキストのみのバージョンをレンダリングし、それとの差分を検討することを検討してください。
それで、あなたは期待しています
<font face="Arial">Hi Mom</font>
そして
<span style="font-family:Arial;">Hi Mom</span>
同じとみなされるでしょうか？
出力はユーザー エージェントに大きく依存します。のように イオナット・アンヘルコヴィシ氏はこう提案する, 、イメージを作ります。関心のあるブラウザごとに 1 つずつ実行してください。
HTML には Pretty Diff のマークアップ モードを使用します。すべて JavaScript で書かれています。
それが XHTML の場合 (これは私の側で多くのことを想定しています)、Xml Diff Patch Toolkit が役に立ちますか? http://msdn.microsoft.com/en-us/library/aa302294.aspx
小さな違いの場合は、通常のテキストの差分を実行して、不足している部分または挿入された部分を分析して解決方法を確認できる可能性がありますが、大きな違いの場合、これを行うのは非常に困難になります。
たとえば、左揃えの画像 (テキストの段落の左側に浮いている) が突然右揃えになったことをどのように検出して表示できるでしょうか?
テキストの相違を使用すると、重要なドキュメントでは壊れます。直感的にどう思うかにもよりますが、XML の違いにより、マークアップのあるテキストにはあまり適さない差分が生成される可能性があります。私の知る限り、 デイジーディフ HTMLに特化した唯一のライブラリです。HTML のサブセットではうまく機能します。
Java と XHTML を使用している場合は、 XMLユニット を使用して 2 つの XML ドキュメントを比較できます。 org.custommonkey.xmlunit.DetailedDiff クラス：
すべての 2 つの XML ドキュメント間の相違点。ドキュメントの比較は止まりません 一度は、最初の回復不能 diff とは異なり、difference が見つかります。 クラス。
これを行う良い方法は次のとおりだと思います HTMLを画像にレンダリングする そして、いくつかを使用してください 画像を比較できる diff ツール 違いを見つけるために。
