Find difference between two strings in JavaScript

JavaScript

string comparison

coding

string manipulation

programming tutorial

Find difference between two strings in JavaScript

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

JavaScript & Web

Introduction

Finding the difference between two strings in JavaScript depends on what kind of difference you need. For character-level diffs, iterate through both strings and compare at each index. For word-level or line-level diffs, split the strings and compare the resulting arrays. For production use cases like showing text changes (similar to Git diffs), use a library like diff (npm). JavaScript has no built-in diff function, so you must implement or import one.

Character-by-Character Comparison

javascript

1function findCharDifferences(str1, str2) {
2  const diffs = [];
3  const maxLen = Math.max(str1.length, str2.length);
4
5  for (let i = 0; i < maxLen; i++) {
6    if (str1[i] !== str2[i]) {
7      diffs.push({
8        index: i,
9        str1: str1[i] || '(missing)',
10        str2: str2[i] || '(missing)'
11      });
12    }
13  }
14  return diffs;
15}
16
17const diffs = findCharDifferences('hello world', 'hallo werld');
18console.log(diffs);
19// [
20//   { index: 1, str1: 'e', str2: 'a' },
21//   { index: 7, str1: 'o', str2: 'e' }
22// ]

This identifies positions where characters differ. It handles strings of different lengths by treating missing characters as differences.

Finding Added/Removed Characters

javascript

1function findUniqueChars(str1, str2) {
2  const set1 = new Set(str1);
3  const set2 = new Set(str2);
4
5  const onlyInStr1 = [...set1].filter(ch => !set2.has(ch));
6  const onlyInStr2 = [...set2].filter(ch => !set1.has(ch));
7
8  return { removed: onlyInStr1, added: onlyInStr2 };
9}
10
11console.log(findUniqueChars('abcdef', 'abcxyz'));
12// { removed: ['d', 'e', 'f'], added: ['x', 'y', 'z'] }

This compares character sets — it tells you which characters exist in one string but not the other, without considering position.

Word-Level Difference

javascript

1function findWordDifferences(str1, str2) {
2  const words1 = str1.split(/\s+/);
3  const words2 = str2.split(/\s+/);
4
5  const removed = words1.filter(w => !words2.includes(w));
6  const added = words2.filter(w => !words1.includes(w));
7
8  return { removed, added };
9}
10
11const result = findWordDifferences(
12  'the quick brown fox jumps',
13  'the slow brown cat jumps'
14);
15console.log(result);
16// { removed: ['quick', 'fox'], added: ['slow', 'cat'] }

Longest Common Subsequence (LCS)

The LCS algorithm finds the longest sequence of characters common to both strings, which helps identify what was kept versus what changed:

javascript

1function lcs(str1, str2) {
2  const m = str1.length;
3  const n = str2.length;
4  const dp = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0));
5
6  for (let i = 1; i <= m; i++) {
7    for (let j = 1; j <= n; j++) {
8      if (str1[i - 1] === str2[j - 1]) {
9        dp[i][j] = dp[i - 1][j - 1] + 1;
10      } else {
11        dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
12      }
13    }
14  }
15
16  // Backtrack to find the LCS string
17  let result = '';
18  let i = m, j = n;
19  while (i > 0 && j > 0) {
20    if (str1[i - 1] === str2[j - 1]) {
21      result = str1[i - 1] + result;
22      i--; j--;
23    } else if (dp[i - 1][j] > dp[i][j - 1]) {
24      i--;
25    } else {
26      j--;
27    }
28  }
29
30  return result;
31}
32
33console.log(lcs('abcdef', 'acbcf'));  // "abcf"

The LCS is the foundation of diff algorithms. Characters not in the LCS are the "differences."

Using the diff Library

For production applications, use the diff npm package:

bash

npm install diff

javascript

1import { diffChars, diffWords, diffLines } from 'diff';
2
3// Character-level diff
4const charDiff = diffChars('hello world', 'hallo werld');
5charDiff.forEach(part => {
6  const prefix = part.added ? '+' : part.removed ? '-' : ' ';
7  process.stdout.write(`${prefix}${part.value}`);
8});
9// Output: h-e+allo w-o+erld
10
11// Word-level diff
12const wordDiff = diffWords(
13  'the quick brown fox',
14  'the slow brown cat'
15);
16wordDiff.forEach(part => {
17  if (part.added) console.log(`+ ${part.value}`);
18  else if (part.removed) console.log(`- ${part.value}`);
19  else console.log(`  ${part.value}`);
20});
21// Output:
22//   the
23// - quick
24// + slow
25//   brown
26// - fox
27// + cat
28
29// Line-level diff
30const lineDiff = diffLines(
31  'line1\nline2\nline3',
32  'line1\nmodified\nline3'
33);

Levenshtein Distance (Edit Distance)

The edit distance tells you the minimum number of single-character edits (insertions, deletions, substitutions) to transform one string into another:

javascript

1function levenshtein(a, b) {
2  const m = a.length, n = b.length;
3  const dp = Array.from({ length: m + 1 }, (_, i) =>
4    Array.from({ length: n + 1 }, (_, j) => (i === 0 ? j : j === 0 ? i : 0))
5  );
6
7  for (let i = 1; i <= m; i++) {
8    for (let j = 1; j <= n; j++) {
9      if (a[i - 1] === b[j - 1]) {
10        dp[i][j] = dp[i - 1][j - 1];
11      } else {
12        dp[i][j] = 1 + Math.min(
13          dp[i - 1][j],     // deletion
14          dp[i][j - 1],     // insertion
15          dp[i - 1][j - 1]  // substitution
16        );
17      }
18    }
19  }
20
21  return dp[m][n];
22}
23
24console.log(levenshtein('kitten', 'sitting'));  // 3
25console.log(levenshtein('hello', 'hallo'));     // 1

Highlighting Differences in HTML

javascript

1import { diffChars } from 'diff';
2
3function highlightDiff(oldStr, newStr) {
4  const diff = diffChars(oldStr, newStr);
5
6  return diff.map(part => {
7    if (part.added) return `<ins style="background:#d4edda">${part.value}</ins>`;
8    if (part.removed) return `<del style="background:#f8d7da">${part.value}</del>`;
9    return part.value;
10  }).join('');
11}
12
13const html = highlightDiff('the quick fox', 'the slow cat');
14// "the <del>quick fox</del><ins>slow cat</ins>"

Comparing Strings Ignoring Case/Whitespace

javascript

1function normalize(str) {
2  return str.toLowerCase().replace(/\s+/g, ' ').trim();
3}
4
5function areSimilar(str1, str2) {
6  return normalize(str1) === normalize(str2);
7}
8
9console.log(areSimilar('Hello  World', 'hello world'));  // true
10
11// Find meaningful differences after normalization
12function normalizedDiff(str1, str2) {
13  return findCharDifferences(normalize(str1), normalize(str2));
14}

Common Pitfalls

Unicode and emoji: String indexing in JavaScript uses UTF-16 code units. Characters like emoji ("😀".length === 2) span two indices. Use Array.from(str) or the spread operator [...str] to split by code points instead of code units.
Performance with long strings: Character-by-character comparison is O(n), but LCS and Levenshtein are O(n*m). For very long strings (10,000+ characters), these algorithms use significant memory and time. Use the diff library which has optimized implementations.
Set-based comparison loses position: Using Set to find unique characters tells you what changed but not where. For positional differences, use index-based comparison or a diff algorithm.
Case sensitivity: 'Hello' !== 'hello' in JavaScript. If case differences are not meaningful, normalize both strings with .toLowerCase() before comparing.
Whitespace differences: Trailing spaces, different line endings (\n vs \r\n), and tab-vs-space differences create noise. Normalize whitespace before comparing if these differences are not relevant.

Summary

For character-by-character differences, iterate with index comparison
For word-level differences, split strings and compare arrays
Use the diff npm package for production-quality diffs (character, word, or line level)
Levenshtein distance measures how many edits are needed to transform one string into another
LCS finds the longest common subsequence, which is the basis of most diff algorithms
Normalize strings (case, whitespace) before comparing when those differences are irrelevant

Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course

Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

Find difference between two strings in JavaScript

Interview Questions practice on Codemia

Introduction

Character-by-Character Comparison

Finding Added/Removed Characters

Word-Level Difference

Longest Common Subsequence (LCS)

Using the diff Library

Levenshtein Distance (Edit Distance)

Highlighting Differences in HTML

Comparing Strings Ignoring Case/Whitespace

Common Pitfalls

Summary

Related reading

Tackling System Design Interview Problems

Track what you have practised

Interview Questions practice on Codemia