Làm thế nào để tạo ra một cái nhìn khác biệt hình ảnh như Stack tràn không?

Question

Chế độ xem diff của Stack Overflow rất tốt. Tôi muốn thực hiện việc này bằng cách sử dụng javascript, nhưng tôi không biết cách bắt đầu, ai có thể đưa ra một số đề xuất?

như:

Answer 1

bạn có thể thử dự án google-diff-match-patch, dự án này cung cấp các thuật toán mạnh mẽ để thực hiện các thao tác cần thiết để đồng bộ hóa văn bản thuần túy.

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

Có thư viện JavaScript mà không hình dung khác. Đây là một vài ví dụ tôi thấy:

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

tôi đã không cố gắng nào của họ, vì vậy tiếc là tôi không thể cho bạn biết đó là phù hợp nhất cho nhu cầu của bạn, nhưng nó có thể là giá trị kiểm tra chúng ra.

Cập nhật

jsdifflib trông đầy hứa hẹn, có a demo có sẵn mà bạn có thể thử.