[解決済み] レンダリングされたHTMLのdiffアルゴリズムを持っている人はいますか？[クローズド］

質問

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

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

Josh その通りです。しかし、削除されたテキストを赤色か何かで表示することはできるかもしれません。HTML コンテンツに WYSIWYG エディタを使用する場合、差分を取るために HTML に切り替える必要がないようにしたい、というのがその考えです。2つのWYSIWYGエディタを並べて使いたいんです。少なくとも、エンドユーザーにとって使いやすいように、差分を並べて表示することができます。

どのように解決するのですか？

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

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

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

このテクニックを使いたい場合は、diff アルゴリズムを実行し、たくさんの visibility:hidden <span> を挿入するか、あるいは小さな <div> を、diff に従ってサイドバイサイドのバージョンが一致する場所に配置します。 次に、各チェックポイント (とそのサイドバイサイドの隣人) を見つけて、ページ上で上位 (下位) にあるチェックポイントに縦の間隔を追加する JavaScript を実行します。 これで、レンダリングされた HTML の差分はそのチェックポイントまで垂直に揃い、サイド バイ サイドのページの残りの部分で垂直方向の揃えを修復し続けることができます。