人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

WEBでの差分比較のスクリプトとして
http://ejohn.org/projects/javascript-diff-algorithm/
を見つけたんですが、コレを使って(あまり改変せず)
見た目http://labs.ceek.jp/diff/diff.cgi
のようなフォームを動かすことはできるでしょうか?

●質問者: nagahito
●カテゴリ:ウェブ制作
✍キーワード:Web スクリプト 比較
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● kronecker
●60ポイント

挑戦してみたけど改行やスペースの扱いが難しい…たぶんバグあります。より完成度の高いものは他の人に任せます。(無責任ですみません…)


jsdiff.jsのdiffString関数

function diffString( o, n ) {
 var out = diff( o.split(/\s+/), n.split(/\s+/) );
 var str = "";
 var split1 = o.split(/[^\s]+/);
 var split2 = n.split(/[^\s]+/);

 for ( var i = 0; i < out.n.length; i++ ) {
 if ( out.n[i].text == null ) {
 if ( out.n[i].indexOf('"') == -1 &amp;&amp; out.n[i].indexOf('<') == -1 )
 str += split2[i].replace("\n","<br>") + "<ins style='background:#E6FFE6;'>" + out.n[i] +"</ins>";
 else
 str += split2[i].replace("\n","<br>") + out.n[i];
 } else {
 var pre = "";
 if ( out.n[i].text.indexOf('"') == -1 &amp;&amp; out.n[i].text.indexOf('<') == -1 ) {
 var n = out.n[i].row + 1;
 while ( n < out.o.length &amp;&amp; out.o[n].text == null ) {
 if ( out.o[n].indexOf('"') == -1 &amp;&amp; out.o[n].indexOf('<') == -1 &amp;&amp; out.o[n].indexOf(':') == -1 &amp;&amp; out.o[n].indexOf(';') == -1 ){
 pre += split1[n].replace("\n", "<br>") + "<del style='background:#FFE6E6;'>" + out.o[n] +"</del>";
 }
 n++;
 }
 }
 str += split2[i].replace("\n","<br>") + out.n[i].text + pre;
 }
 }
 return str;
}

diff.html

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<meta http-equiv="Content-Style-Type" content="text/css"><title>Web Diff</title>

<script type="text/javascript" src="./jsdiff.js"></script>
<script type="text/javascript"><!--
 function displayDiff(str1, str2) {
 diffTD.innerHTML = diffString(str1, str2);
 }
//--></script>
<style type="text/css">
textarea {
 width:100%;
 height:300px;
}
</style>
</head><body>

<h1>Web Diff</h1>
<form name="form1">
<table border="1" width="100%">
 <tbody><tr>
 <th width="50%">Before</th>
 <th width="50%">After</th>
 </tr>
 <tr>
 <td><textarea name="input_1"></textarea></td>
 <td><textarea name="input_2"></textarea></td>
 </tr>
 <tr>
 <td colspan="2" align="center">
 <input type="button" value="Web Diff" onclick="displayDiff(input_1.value, input_2.value)">
 <br>
 日本語不可
 </td>
 </tr>
 <tr>
 <td colspan="2" valign="top" id="diffTD"></td>
 </tr>
</tbody></table>
</form>

<ins style='background:#E6FFE6;'>追加</ins>
<del style='background:#FFE6E6;'>削除</del>
</body></html>
◎質問者からの返答

ソースまで書いていただいてありがとうございます。

エラーが出て動かないですが、できそうなことはわかりました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ