How to compare two texts for differences, line by line

How to compare two texts for differences, line by line

Two versions of a contract, a config file, or a web page's HTML look the same until something breaks. Put them side by side in a diff, clean up the formatting first, and every real change stands out.

Reading two versions by eye misses changes

A changed port number, a dropped comma in a clause, or one attribute in a page template is easy to miss when you read two long versions one after the other. The eye fills in what it expects to see. In code and config files, that one change is often the reason something stopped working.

Formatting adds noise on top. When one copy of a page's HTML is minified onto a single line and the other is indented, every line differs, and the real change is lost among them.

Format first, then compare

For HTML, run both versions through the HTML Formatter with the same indent. It puts block elements on their own lines, indents their children, and formats inline scripts and styles. It changes layout only. It does not close missing tags or report errors.

Then paste the old version into Original and the new one into Changed in the Diff Checker. It finds the changes with the Myers diff algorithm, the same approach Git uses, and marks removed text in red and added text in green, side by side or in a unified view. Compare by lines for code, or by words or characters for prose. Ignore whitespace and Ignore case remove differences you don't care about. Both texts stay in your browser, and each side can be up to 2 MB.

Compare two texts for differences

  1. Copy the old and the new version of the text, code, or HTML.
  2. If it is HTML, format both in the HTML Formatter with the same indent.
  3. Paste the old version into Original and the new one into Changed in the Diff Checker.
  4. Choose Compare by lines for code or by words for prose, and tick Ignore whitespace if spacing does not matter.
  5. Press Compare. Read the summary of added and removed lines, then each highlighted change.
  6. Switch to the unified view if you need a diff that Git or patch can read.

What a text diff won't do

  • It compares text, not meaning. Moving a function shows up as one removal and one addition.
  • Images, PDFs, and other binary files can't be compared.
  • The HTML Formatter does not fix broken markup, so an unclosed tag stays unclosed in both versions.
  • Line endings are normalized, so a Windows copy and a Unix copy of the same file count as equal.

Frequently asked questions

How do I compare two texts for differences online?

Paste one version into Original and the other into Changed in the Diff Checker, then press Compare. Removed text is red and added text is green.

Can I compare two versions of a web page?

Yes. Copy the HTML source of each version, format both in the HTML Formatter, and compare the results in the Diff Checker.

Are my texts uploaded anywhere?

No. The Diff Checker and the HTML Formatter both run in your browser.

Why is a whole line marked when only one word changed?

Line mode compares whole lines. The changed words inside the line are highlighted more strongly, or you can compare by words instead.

Tools used in this guide

  • HTML FormatterDeveloper Tools

    Beautifies HTML with consistent indentation, including inline CSS and JavaScript.

  • Diff CheckerDeveloper Tools

    Compares two texts or code files and highlights added, removed, and changed lines.

More from the blog

All guides