Text

How to Compare Two Texts Online

Dev Nexus5 min read

Learn how to compare two blocks of text online and read exactly what was added, removed or changed - line by line, without missing a thing.

You have two versions of the same text and you need to know what changed between them. Maybe an editor sent back a revised draft, a colleague tweaked a config file, or you pasted the same paragraph twice and one of them is subtly different. Reading both in full and trying to hold the differences in your head is slow and unreliable.

This guide shows you how to compare two blocks of text online in a few seconds. You'll paste both versions, run a diff, and read a colour-coded result that marks every line that was added, removed or left untouched - so nothing slips past you.

The Problem

Comparing text by eye is deceptively hard. Your brain is wired to read for meaning, not to catch a single flipped word, a transposed line or a stray trailing space. The longer the two texts are, the more you miss - and the changes you care about are often the small ones.

Manual comparison also doesn't scale. Scrolling back and forth between two documents, or laying two windows side by side, works for a paragraph but collapses the moment you're comparing a page of copy or a config file. You end up either trusting a scan you know is imperfect, or wasting time re-reading lines that never changed.

What you actually want is for the differences to be computed for you and shown clearly, so you can spend your attention on deciding whether each change is correct - not on hunting for it.

The Solution

A text diff does exactly that. You give it two blocks of text - an "before" and an "after" - and it finds the longest run of lines the two share, then marks everything else as an insertion or a deletion. The result is a highlighted view: one colour for lines that appear only in the new text, another for lines that were removed, and neutral for lines that match.

The Text Diff tool does this entirely in your browser. Both blocks of text are compared locally in JavaScript - neither is uploaded or stored - so you can safely compare private drafts, contracts or source code, and it keeps working offline. Below is how to use it from start to finish, plus the mistakes that make people distrust a diff they should trust.

Step-by-Step Guide

1
Gather both versions of the text
Get the two versions you want to compare ready to paste - an old and new draft, a config before and after a change, or expected versus actual output. You don't need to clean them up first; the tool compares them as they are. If they came from different systems, watch out for mixed line endings, which we cover in the mistakes below.
2
Paste one version on each side
Open Text Diff and paste the original into the left panel and the changed version into the right. The comparison runs as you type, aligning matching lines and highlighting the rest, so you get a live result the moment both sides are in place.
3
Turn on ignore-case or ignore-whitespace if needed
If you only care about meaningful edits, toggle ignore case so capitalisation changes don't count, and ignore whitespace so differences caused purely by spaces, tabs or trailing blanks are hidden. This strips out formatting noise and leaves only the changes that matter.
4
Read the highlighted differences
Lines shown only on the new side were added; lines shown only on the old side were removed. A line that was edited appears as a removal plus an addition, so you see both the old and new wording. Anything without a highlight is identical in both versions and can be skipped.
5
Verify each change and act on it
Walk through the highlighted lines and decide whether each change is correct. If you spot a wording edit you now want to apply consistently across the whole document, a find and replace tool is the natural next step for rolling it out everywhere.

Common Mistakes

Comparing text with mixed line endings
Text copied from different operating systems can mix Windows (\r\n) and Unix (\n) line endings. Lines that look identical can then be flagged as different. If a diff shows changes that make no visual sense, normalise the line endings and compare again.
Forgetting that the diff is line-based
A change anywhere on a line marks the entire line as changed - shown as the old line removed and the new line added. If you only edited one word, that's expected. For long paragraphs, putting sentences on their own lines makes the highlighting far more precise.
Leaving whitespace noise turned on
If someone reflowed a paragraph or changed indentation, every affected line lights up even though the wording didn't change. When you only care about content, turn on ignore-whitespace so those formatting-only differences disappear and the real edits stand out.
Trying to diff structured data as plain text
Comparing JSON, XML or other structured data as raw text flags meaningless differences like re-ordered keys. For those, a structural comparison such as JSON Compare reads far better because it understands the data instead of the characters.

Frequently Asked Questions

Is my text uploaded when I compare it online?

Not with Text Diff. The comparison runs entirely in your browser, so neither block of text is uploaded, logged or stored. That makes it safe for private drafts, contracts and source code, and it works offline once the page has loaded.

How do I read the added and removed lines?

Lines shown only on the new side were added, and lines shown only on the old side were removed. An edited line appears as a removal plus an addition so you see both versions. Unhighlighted lines are identical in both texts.

Can I ignore capitalisation and spacing differences?

Yes. Toggle ignore-case to treat capitalisation as identical and ignore-whitespace to hide differences from spaces, tabs or trailing blanks. Both help you focus on meaningful changes instead of formatting noise.

Why is a whole line marked changed when I edited one word?

Because the comparison is line-based, any edit on a line makes the whole line count as different. Splitting long paragraphs so each sentence is on its own line gives you more granular, precise highlighting.

What if I'm comparing JSON or code instead of prose?

Plain text diffs work fine for code, but for structured data like JSON a dedicated comparison is better because it ignores meaningless differences such as key order. Try JSON Compare for that job.