Stack Overflowのような視覚的な差分ビューを作成するにはどうすればよいですか？

Question

スタックオーバーフローのdiffビューは非常に良いです。私はjavascriptを使ってこれをやりたいのですが、私はどのように始めるべきか分かりませんが、誰が助言を与えることができますか？

は、次のような：

Answer 1

あなたはgoogle-diff-match-patchプロジェクトを試すことができます、このプロジェクトは、プレーンテキストを同期するために必要な操作を実行するための堅牢なアルゴリズムを提供します。

デモ：http://jsfiddle.net/N6bAn/

コード：

<div class="test"> 
    <div id="oldStr" class="text">the stackoverflow question and answer version control is very well,i want to do this use javascript,but i don't know how to start,who can give some suggestion?thanks</div> 
    <div id="newStr" class="text">Stack Overflow's diff view is very good. I want to do this using javascript,but i don't know how to start,who can give some suggestion?thanks</div> 
</div> 
<input type="button" value="GO" onclick="launch()" /> 
<div class="test"> 
    <div class="text" id="outputOldStr"></div> 
    <div class="text" id="outputNewStr"></div> 
</div> 
<script type="text/javascript"> 
    var dmp = new diff_match_patch(); 

    function launch() { 
     var text1 = document.getElementById('oldStr').innerHTML; 
     var text2 = document.getElementById('newStr').innerHTML; 
     dmp.Diff_EditCost = 8; 

     var d = dmp.diff_main(text1, text2); 
     dmp.diff_cleanupEfficiency(d); 
     var oldStr = "", newStr = ""; 
     for (var i = 0, j = d.length; i < j; i++) { 
      var arr=d[i]; 
      if (arr[0] == 0) { 
       oldStr += arr[1]; 
       newStr += arr[1]; 
      } else if (arr[0] == -1) { 
       oldStr += "<span class='text-del'>" + arr[1] + "</span>"; 
      } else { 
       newStr += "<span class='text-add'>" + arr[1] + "</span>"; 
      } 
     } 
     document.getElementById('outputOldStr').innerHTML = oldStr; 
     document.getElementById('outputNewStr').innerHTML = newStr; 
    } 
</script> 

Answer 2

diffの可視化を行いJavaScriptライブラリがあります。 、

• https://github.com/cemerick/jsdifflib
• http://prettydiff.com/

私はそれらのいずれかを試していないので、残念ながら、私はあなたが必要とするために最も適しているあなたを伝えることはできません。これらは私が見つけたいくつかの例であり、それをチェックする価値があるかもしれません。

更新

jsdifflibは、あなたが試みることができることを利用できa demoあり、有望に見えます。