Jak utworzyć wizualny widok różnicowy, taki jaki ma przepełnienie stosu?

Question

Widok różnicowy stosu przepełnienia jest bardzo dobry. Chcę to zrobić za pomocą javascript, ale nie wiem jak zacząć, kto może dać jakieś sugestie?

takich jak:

Answer 1

Możesz spróbować projektu google-diff-match-patch, ten projekt oferuje solidne algorytmy do wykonywania operacji wymaganych do synchronizowania zwykłego tekstu.

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

Kod:

<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

Istnieją biblioteki JavaScript, który robi diff wizualizację. Oto kilka przykładów znalazłem:

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

nie próbowałem żadnej z nich, więc niestety nie mogę powiedzieć, co jest najbardziej odpowiednie dla Ciebie potrzebuje, ale może warto je sprawdzić.

Aktualizacja

jsdifflib wygląda obiecująco, nie ma a demo dostępne, które można spróbować.