Wie erstellt man eine visuelle Diff-Ansicht wie Stack Overflow?

Question

Stack Overflow Diff-Ansicht ist sehr gut. Ich möchte dies mit javascript tun, aber ich weiß nicht, wie ich anfangen soll, wer kann einen Vorschlag geben?

wie:

Answer 1

können Sie versuchen, google-diff-match-patch Projekt, dieses Projekt bieten robuste Algorithmen, um die Vorgänge zum Synchronisieren von Klartext durchzuführen.

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

Code:

<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

Es gibt JavaScript-Bibliotheken, die diff Visualisierung der Fall ist. Dies sind ein paar Beispiele, die ich gefunden:

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

Ich habe keinen von ihnen versucht, so kann ich leider nicht sagen, was am besten für Sie braucht, aber es könnte sich lohnen, sie zu überprüfen.

aktualisieren

jsdifflib sieht vielversprechend aus, da a demo vorhanden ist, dass man versuchen könnte.