Text Diff Checker — Free HTML CSS JS Word-Level Diff Snippet

Comparing two versions of a document, contract, or paragraph word-by-word is exactly the kind of problem that looks trivial until you try to implement it — a naive character comparison produces useless, noisy output. This snippet implements a real longest common subsequence (LCS) diff algorithm from scratch in vanilla JavaScript, operating on whitespace-preserving word tokens instead of individual characters.

Tokenizing without losing whitespace

tokenize() splits on /(\s+)/ with a capturing group, which — unlike a plain split on whitespace — keeps every run of spaces, tabs, and newlines as its own token in the resulting array. That means the diff algorithm treats "quick brown" and "quick brown" (two spaces) as genuinely different token sequences, and reassembling the output never needs to guess where whitespace should go — it's already preserved token-for-token.

Building the LCS table bottom-up

dp[i][j] holds the length of the longest common subsequence between the tail of array a starting at index i and the tail of b starting at index j. The nested loop fills this table from the bottom-right corner backward: dp[i][j] = a[i] === b[j] ? dp[i+1][j+1] + 1 : Math.max(dp[i+1][j], dp[i][j+1]) — if the tokens match, extend the best subsequence found one cell diagonally; otherwise take whichever neighboring cell (skip a token from a, or skip one from b) gives the longer subsequence. This is the same core recurrence used by diff, git diff, and most text-comparison tools.

Backtracking to recover the actual edits

Once the table is built, a forward walk from (0, 0) reconstructs the operations: matching tokens are eq, and at a mismatch the walk follows whichever neighbor cell in the DP table has the larger value — dp[i+1][jj] >= dp[i][jj+1] — deciding whether this token was deleted from a or inserted from b. This greedy-looking walk is provably optimal because the table already encodes the best subsequence length at every position.

Rendering with real `<del>`/`<ins>` elements

Deleted tokens render inside <del> and inserted tokens inside <ins> — the semantically correct HTML elements for this exact purpose, not just styled <span>s — while every token is passed through escapeHtml() first so pasted text containing <, >, or & can't break the output markup.

Customizing it

Swap word-level tokenization for character-level (drop the whitespace-preserving regex and split on '') for finer-grained diffs, or add a line-level mode by tokenizing on \n first and running the same diffWords() function on lines instead of words.