WEBでの差分比較のスクリプトとして

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

回答の条件
  • 1人5回まで
  • 登録:2006/12/22 14:22:04
  • 終了:2006/12/29 14:25:02

回答(1件)

id:kronecker No.1

kronecker回答回数88ベストアンサー獲得回数102006/12/22 23:20:19

ポイント60pt

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


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>
id:washita

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

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

2006/12/24 20:34:15

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません