如何創建像Stack Overflow這樣的視覺差異視圖？

Question

Stack Overflow的差異視圖非常好。我想用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

有，做差異可視化的JavaScript庫。這是幾個例子，我發現：

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

我還沒有嘗試過任何人，所以很遺憾，我不能告訴你，這是最適合你的需要，但它可能值得檢查出來。

更新

jsdifflib看起來很有希望，有a demo可用，你可以試試。