How to create a visual diff view like Stack Overflow?

Question

Viewing complexity is very good. I want to do this with javascript , but I don’t know where to start, who can give some suggestion?

eg:

Answer 1

you can try google-diff-match-patch project, this project offers reliable algorithms for performing operations necessary for synchronization of plain text.

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

the 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">Qaru 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

JavaScript libraries exist that perform difference visualization. Here are some examples I found:

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

I have not tried any of them, so, unfortunately, I can’t tell you what is most suitable for you, but it might be worth checking them out.

Update

jsdifflib looks promising, there is a demo version that you could try.