Edited at

google_match_patchの使い方(javascript編)

More than 5 years have passed since last update.


説明

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


手順

1. ヘッダーでjsファイルを読み込みます

2. diff_match_pach オブジェクトを作成します

3. オブジェクトに diff_main() 関数を用いて diff を取得します

4. 得られた diff に diff_prettyHtml() 関数を用いて diff のhtml 出力を得ます。


ダウンロード

http://code.google.com/p/google-diff-match-patch/downloads/list


ドキュメンテーション

http://code.google.com/p/google-diff-match-patch/wiki/API

入力(新旧データ)はテキストエリア部で、結果は 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)
})
});