JavaScript based diff utility

Question

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.

It's all good, you're too hard on yourself. By the way, great question and I wouldn't have been led to these answers without it (at least not so easily). — MrBoJangles, Dec 22 '11 at 20:35
If @austincheney's claim below of a diff that is ~4.5 faster is genuine, and I have no reason to think it is not, I'd suggest that you consider marking his answer as accepted. That, and the even more important (imo) characteristic of highlighting character differences in each line! — MrBoJangles, Jan 16 '13 at 15:45
John Resig's jdiff is the simplest and most effective solution out of the lot. One javascript file required, and one line in javascript to implement: http://ejohn.org/projects/javascript-diff-algorithm/#postcomment — Fuzzy Analysis, Jan 13 '16 at 05:47
I could be doing something wrong, but I'm actually using John Resig's thing currently and the problem with it is that it decodes whatever's different. So it looks all jacked up if tags changed, for example. — MrBoJangles, Sep 01 '16 at 17:12

score 36 · Answer 1 · answered Mar 11 '11 at 15:38

36

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/

answered Mar 11 '11 at 15:38

austincheney

807
10
9

1

Can either this or jsdifflib be set to not break-up individual words? – Peter Ehrlich Nov 07 '12 at 21:45
1

@PeterEhrlich You should join in the Pretty Diff mailing list and provide a sample use case so that your request can be added to the project. – austincheney Nov 17 '12 at 04:45
1

Just sort of doing research in to this for the moment. Will do when I get more in to the project! – Peter Ehrlich Nov 19 '12 at 21:10
2

Just a follow-up: I have incorporated this baby (prettydiff) into my li'l web app and I like it. I like it a lot. – MrBoJangles Jan 16 '13 at 15:41
1

@austincheney, You did a great job, but lack of documentation make your project unable to understand. Its like hell, compared to original http://cemerick.github.io/jsdifflib/demo.html (have a look at page source) – Alexander Selishchev Apr 28 '14 at 14:01
1

If I check `hello` against `hel world` it misses the `rld` – Jul 24 '15 at 17:28
2

Hey can you tell me how to use prettydiff in js..do I have to include only prettydiff.js ? – Dhara Jul 28 '16 at 10:23
1

Documentation is pretty well hidden here: http://prettydiff.com/documentation.xhtml. I found it by scrolling down on the demo page linked above. – Ryan Shillington Jul 31 '17 at 16:34
4

OK. This thing is pretty bad - I don't know why it has so many up votes. I can't get it to return objects of any kind. It insists on returning HTML, which includes a mandatory tagline that's advertising for the library itself. – Ryan Shillington Jul 31 '17 at 17:19
1

@RyanShillington Agreed. It's called pretty diff too and dang it's ugly! lol – Luke Jan 09 '18 at 14:53

Scott Bale · Accepted Answer · 2011-11-30T20:48:52.467

34

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

edited Nov 30 '11 at 20:48

answered Jun 16 '10 at 13:29

Scott Bale

10,649
5
33
36

1

The context size was the important thing I didn't see, thanks :) – poke Jun 16 '10 at 13:38
4

jsdifflib is nice but it does not display the word by word diff. It just shows the lines that are different. – max Aug 14 '16 at 02:11
2

[jsdiff](https://www.npmjs.com/package/diff) is standard and active node.js text diff library – Gagan Jan 20 '21 at 06:58

Gian Marco · Answer 3 · 2017-08-02T14:07:17.740

32

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

Also available on NPM

npm install diff-match-patch

edited Aug 02 '17 at 14:07

answered Dec 31 '12 at 09:24

Gian Marco

22,140
8
55
44

2

This makes it more consumable, especially in a modern web browser with webpack, etc: https://www.npmjs.com/package/diff-match-patch – Ryan Shillington Jul 31 '17 at 17:42
1

After several hours of trying different diff libraries, this one is definitely the best for comparing straight text. It should be noted that it doesn't work really with XML/HTML. – Ryan Shillington Jul 31 '17 at 17:44

score 8 · Answer 4 · answered Aug 17 '14 at 18:09

8

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.

answered Aug 17 '14 at 18:09

Daniel F

13,684
11
87
116

2

CodeMirror does not need any server-side diff computation anymore – Udo Klimaschewski Aug 10 '16 at 13:42
2

Good to know, then they can also remove the "This addon depends on the google-diff-match-patch library to compute the diffs."-note which is still on http://codemirror.net/demo/merge.html – Daniel F Aug 10 '16 at 13:45
3

It still needs the external JS "https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js", but no server side code anymore – Udo Klimaschewski Aug 10 '16 at 14:29

score 6 · Answer 5 · answered Sep 02 '13 at 03:08

6

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

answered Sep 02 '13 at 03:08

imslavko

6,596
2
34
43

1

a good, but very slow on a larger datasets – Ulterior Dec 16 '14 at 13:24

score 5 · Answer 6 · answered Sep 25 '14 at 19:07

Check out the the wikEd diff JavaScript library. There is also an online tool.

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.

score 4 · Answer 7 · answered Jun 28 '13 at 08:19

4

Check out CodeMirror. Nuff said.

answered Jun 28 '13 at 08:19

Tim

833
11
11

7

*“This addon depends on the google-diff-match-patch library to compute the diffs.”* – poke Jun 28 '13 at 11:42
1

The demo is quite impressive at first glance. I might have to check this guy out. – MrBoJangles Sep 01 '16 at 17:18

score 4 · Answer 8 · edited Jan 30 '14 at 11:19

4

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.

edited Jan 30 '14 at 11:19

cemerick

5,916
5
30
51

answered Jun 16 '10 at 13:26

realshadow

2,599
1
20
38

score 3 · Answer 9 · answered Feb 13 '15 at 13:25

3

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));

answered Feb 13 '15 at 13:25

aqm

2,942
23
30

2

For future readers, this diff lib has terrible performance when diffing large amounts of text. – Brandon Nov 07 '20 at 01:11
1

true, but it's excellent for small quantities of a few 100k in snapshot tests and the like diffing large quantities in general is quite slow, written code using byte steams before to incrementally load in large files for diffing but that wasn't a off the shelf generic diffing library ! :) – aqm Nov 08 '20 at 22:17

score 2 · Answer 10 · edited Jan 30 '14 at 11:19

2

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

edited Jan 30 '14 at 11:19

cemerick

5,916
5
30
51

answered Jun 16 '10 at 13:26

Justin Ethier

131,333
52
229
284

JavaScript based diff utility

10 Answers10

Linked