स्टैक ओवरफ़्लो जैसे विज़ुअल डिस्प्ले व्यू कैसे बनाएं?

Question

स्टैक ओवरफ़्लो का अंतर दृश्य बहुत अच्छा है। मैं javascript का उपयोग करके ऐसा करना चाहता हूं, लेकिन मुझे नहीं पता कि कैसे शुरू करना है, कौन कुछ सुझाव दे सकता है?

जैसे:

Answer 1

आप google-diff-match-patch प्रोजेक्ट को आजमा सकते हैं, यह प्रोजेक्ट सादे पाठ को सिंक्रनाइज़ करने के लिए आवश्यक संचालन करने के लिए मजबूत एल्गोरिदम प्रदान करता है।

डेमो: http://jsfiddle.net/N6bAn/

कोड:

<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

कि diff दृश्य करता JavaScript लाइब्रेरी रहे हैं। ये कुछ उदाहरण मैंने पाया हैं:

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

मैं उनमें से किसी प्रयास नहीं किया है, तो दुर्भाग्य से मैं आपको बता नहीं सकता जो सबसे अधिक उपयुक्त आप की जरूरत है के लिए है, लेकिन यह उन्हें जांचने लायक हो सकता है।

अद्यतन

jsdifflib होनहार लग रहा है, वहाँ है a demo उपलब्ध है कि आप की कोशिश कर सकते।