¿Cómo crear una vista visual diff como lo hace Stack Overflow?

Question

La vista diff de Stack Overflow es muy buena. Quiero hacer esto usando javascript, pero no sé cómo comenzar, ¿quién puede darme alguna sugerencia?

tales como:

Answer 1

puede probar el proyecto google-diff-match-patch, este proyecto ofrece algoritmos robustos para realizar las operaciones necesarias para sincronizar texto sin formato.

Demostración: http://jsfiddle.net/N6bAn/

Código:

<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

Hay bibliotecas de JavaScript que hace la visualización diff. Estos son unos pocos ejemplos que encontré:

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

no he probado ninguno de ellos, por lo que lamentablemente no se puede decir que es el más adecuado para sus necesidades, pero podría valer la pena echarles un vistazo.

actualización

jsdifflib parece prometedor, hay disponibles a demo que se podía tratar.