JavaScript based diff utility

JavascriptDiff

Javascript Problem Overview


I'm looking for a diff equivalent written in JavaScript that only returns/prints relevant lines. I don't want both full text displayed next to each other with the differences highlighted, but just want the actual differences (plus some buffer lines to know where the difference is), similar to the output from the linux diff utility.

Does anybody know a javascript function that does this? All differences should be recognized (even changed whitespace). Thanks.

Javascript Solutions


Solution 1 - Javascript

jsdifflib inline mode comparison, try tweaking the context size to display just the desired window of change you want. There's a demo here

Solution 2 - Javascript

I completely rebuilt the jsdifflib utility for speed. Since my version does not require DOM access it at least 4.5 times faster, and it is also extended to highlight character differences in each line.

http://prettydiff.com/diffview.js

You can test this out with the online tool directly at http://prettydiff.com/

Solution 3 - Javascript

There's also google-diff-match-patch from Google

Also available on NPM

npm install diff-match-patch

Solution 4 - Javascript

  • Mergely is totally worth checking out. CodeMirror-based, client-side only.

  • Then there's the CodeMirror demo which requires server-side diff computation.

  • jsdifflib and prettydiff as mentioned in other answers.

Solution 5 - Javascript

Checkout my minimal implementation: https://github.com/Slava/diff.js

Solution 6 - Javascript

I dont know much about the diff utility in linux or linux in general, but this might be what you are looking for jsdifflib. You can find a live example there and see if it works for you.

Solution 7 - Javascript

Check out CodeMirror. Nuff said.

Solution 8 - Javascript

Check out the the [wikEd diff][1] JavaScript library. There is also an [online tool][2].

wikEd diff features inline text comparisons with block move highlighting and character/word-based resolution. It is optimized for Wikipedia source text, but works great for any type of text or code. The library code is fully customizable, has Unicode support, is extensively commented, and is in the public domain.

[1]: https://en.wikipedia.org/wiki/User:Cacycle/diff "wikEd diff" [2]: http://cacycle.altervista.org/wikEd-diff-tool.html "online tool"

Solution 9 - Javascript

old question i know, but if your doing node work or want something that is compatible with requirejs/commonjs module

I've really liked https://www.npmjs.com/package/diff

console.log(diff.createPatch('some file name.txt', expected, actual));

Solution 10 - Javascript

jsdifflib looks promising - try the demo linked from that page.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionpokeView Question on Stackoverflow
Solution 1 - JavascriptScott BaleView Answer on Stackoverflow
Solution 2 - JavascriptaustincheneyView Answer on Stackoverflow
Solution 3 - JavascriptGian MarcoView Answer on Stackoverflow
Solution 4 - JavascriptDaniel FView Answer on Stackoverflow
Solution 5 - JavascriptimslavkoView Answer on Stackoverflow
Solution 6 - JavascriptrealshadowView Answer on Stackoverflow
Solution 7 - JavascriptTimView Answer on Stackoverflow
Solution 8 - JavascriptCacycleView Answer on Stackoverflow
Solution 9 - JavascriptaqmView Answer on Stackoverflow
Solution 10 - JavascriptJustin EthierView Answer on Stackoverflow