如何创建像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可用，你可以试试。