Compare Two Texts with diff-match-patch
Docify's text diff compares two pasted strings in the browser with Google's diff-match-patch: it runs diff_main then diff_cleanupSemantic, and paints delete, insert, and equal spans. Load sample Compare writes a deleted brown beside an inserted red, keeps the shared jump equal and paints a deleted s beside an inserted ed, then a deleted lazy beside an inserted sleeping. Click Compare; it is not as-you-type. Replacements are delete-plus-insert — there is no yellow “modified” span. Nothing is uploaded.
This is a character-level pasted-text compare, not a line-based git diff, a Word Track Changes pane, or a PDF file checker. For those limits, see Pasted text vs document or PDF compare.
How to compare two texts
Step 1: Paste Original
Put the older version in the Original box. Compare stays disabled until both boxes have text.
Step 2: Paste Modified
Put the newer version in the Modified box. Load sample fills both boxes with this pair and does not run Compare. Compare then deletes brown and lazy and the s after jump, and inserts red, ed, and sleeping.
Step 3: Click Compare
The page constructs a DiffMatchPatch instance, calls diff_main(text1, text2), then diff_cleanupSemantic. The Differences card appears only after that click.
What the colors mean
| Operation | Type | How it looks |
|---|---|---|
| Delete | -1 | Red background, strikethrough |
| Insert | 1 | Green background, no strikethrough |
| Equal | 0 | Unhighlighted foreground text |
The legend on the Differences card lists Deleted and Added only. Replacing brown with red shows a deleted brown beside an inserted red. After semantic cleanup, jumps vs jumped keeps the shared jump equal and paints a deleted s beside an inserted ed. That is not a whole-word jumps hunk. There is no yellow “changed” span.
How the HTML is built
Each hunk's text is escaped (&, <, >) so pasted markup cannot become live HTML. Newlines become <br>. The result is inline spans, not a unified diff file. There is no Copy or Download on the result.
Compare two pasted texts
Click Compare after both boxes have text. Deletes and inserts only. Nothing is uploaded.
Use Text Diff →FAQ
- Does comparing two texts upload them?
- No. Compare runs entirely in your browser. The page does not send either text box to a server.
- Does the diff update as I type?
- No. You click Compare. The button stays disabled until both Original and Modified are non-empty. Load sample fills Original with The quick brown fox jumps over the lazy dog. and Modified with The quick red fox jumped over the sleeping dog. and does not run Compare. Clear empties both boxes and the result.
- What algorithm does Compare use?
- Google's diff-match-patch (the npm package of the same name). Compare calls diff_main(original, modified), then diff_cleanupSemantic so adjacent inserts and deletes group into readable hunks. Operations are -1 delete, 1 insert, or 0 equal. Load sample Compare writes a deleted brown beside an inserted red, keeps the shared jump equal and paints a deleted s beside an inserted ed, then a deleted lazy beside an inserted sleeping.
- Is there a yellow highlight for replacements?
- No. A replacement is a deletion next to an insertion. Deleted spans use red strikethrough; added spans use green without strikethrough; equal text has no highlight. There is no third “modified” color. Load sample Compare is not three whole-word swaps: jumps vs jumped keeps jump equal.