76

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.

Improve this question
4
  • 2
    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). Commented Dec 22, 2011 at 20:35
  • 1
    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! Commented Jan 16, 2013 at 15:45
  • 1
    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: ejohn.org/projects/javascript-diff-algorithm/#postcomment Commented Jan 13, 2016 at 5:47
  • 1
    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. Commented Sep 1, 2016 at 17:12

10 Answers 10

Reset to default
37

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

Can either this or jsdifflib be set to not break-up individual words?
@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.
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.
Hey can you tell me how to use prettydiff in js..do I have to include only prettydiff.js ?
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.
|
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

Improve this answer

3 Comments

The context size was the important thing I didn't see, thanks :)
jsdifflib is nice but it does not display the word by word diff. It just shows the lines that are different.
jsdiff is standard and active node.js text diff library
32

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

Also available on NPM

npm install diff-match-patch
Improve this answer

2 Comments

This makes it more consumable, especially in a modern web browser with webpack, etc: npmjs.com/package/diff-match-patch
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.
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.
Improve this answer

3 Comments

CodeMirror does not need any server-side diff computation anymore
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 codemirror.net/demo/merge.html
It still needs the external JS "cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/…", but no server side code anymore
6

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

Improve this answer

1 Comment

a good, but very slow on a larger datasets
5

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.

Improve this answer

Comments

4

Check out CodeMirror. Nuff said.

Improve this answer

2 Comments

“This addon depends on the google-diff-match-patch library to compute the diffs.”
The demo is quite impressive at first glance. I might have to check this guy out.
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.

Improve this answer

Comments

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));
Improve this answer

2 Comments

For future readers, this diff lib has terrible performance when diffing large amounts of text.
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 ! :)
2

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.