Come creare una visualizzazione visuale come fa Overflow dello stack?

Question

La visualizzazione differenziale dello stack overflow è molto buona. Voglio farlo usando javascript, ma non so come iniziare, chi può dare qualche suggerimento?

come ad esempio:

Answer 1

si può provare il progetto google-diff-match-patch, questo progetto offre algoritmi robusti per eseguire le operazioni richieste per la sincronizzazione del testo normale.

Demo: http://jsfiddle.net/N6bAn/

Codice:

<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

ci sono librerie JavaScript che fa la visualizzazione diff. Questi sono alcuni esempi che ho trovato:

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

Non ho provato nessuna di loro, così purtroppo non si può dire che è il più adatto per voi ha bisogno, ma potrebbe valerne la pena controllarli.

Aggiornamento

jsdifflib sembra essere molto promettente, non v'è a demo disponibili che si potrebbe provare.