google_match_patchの使い方（javascript編）

説明

javascript を用いて画面遷移なしにテキストデータの diff を表示させることができます。

手順

1.　ヘッダーでjsファイルを読み込みます
2. diff_match_pach オブジェクトを作成します
3. オブジェクトに diff_main() 関数を用いて diff を取得します
4. 得られた diff に diff_prettyHtml() 関数を用いて diff のhtml 出力を得ます。

ダウンロード

ドキュメンテーション

入力（新旧データ）はテキストエリア部で、結果は div 部で出力することにしました。
結果には result という id を割りふっています。
diff の表示は、ボタンがクリックされたタイミングで行われるようにします。
ボタンには diff という id を割りふりました。

<textarea id="old_data"></textarea>
<textarea id="new_data"></textarea>
<div id="result"></div>
<button id="diff">diffを取得する</button>

デザイン的な理由により、CSSでdiffの結果を出力するdivを非表示にしておきます。
上記の4つのタグのうち、ロードしたときに見えているのは textarea と button です。

#result {
    display: none;
}

// jqueryを使っています
// diff_match_patch.jsも読み込んでおきましょう
    $(function(){
        $('#diff').click(function(){
            var a = $('#old_data').val()
            var b = $('#new_data').val()
            var dim = new diff_match_patch()
            var diff = dim.diff_main(a,b)
            var pretty = dim.diff_prettyHtml(diff)
            $('#result').html(pretty).hide().fadeIn(800)
        })
    });