テキスト差分チェッカー

テキスト差分チェッカーの役割と活用シーン

テキスト差分チェッカーは、2つの文章やコードの違いを比較し、変更箇所を視覚的に確認できるツールです。
Web制作では、文章校正やコードのバージョン管理、更新履歴の確認に役立ちます。
ミスの発見や修正作業の効率化に欠かせないツールです。

// & < > " ' を安全なHTML文字列に変換する
function escapeChar(ch) {
	switch (ch) {
		case '&': return '&';
		case '<': return '<';
		case '>': return '>';
		case '"': return '"';
		case "'": return ''';
		default : return ch;
	}
}

ブラウザで正しく表示するために、特殊文字をHTMLエスケープしています。 これがないとタグが壊れたり、意図しない表示になることがあります。

// 2つの文字列の最長共通部分列を計算し、差分を<b>タグでマーキングする関数
function diffStrings(a, b) {
	const aArr = [...a], bArr = [...b];
	const lenA = aArr.length, lenB = bArr.length;
	// DPテーブルを作成（2次元配列）
	const dp = Array.from({length: lenA + 1}, () => Array(lenB + 1).fill(0));
	for (let i = 0; i < lenA; i++) {
		for (let j = 0; j < lenB; j++) {
			dp[i + 1][j + 1] = aArr[i] === bArr[j] ? dp[i][j] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
		}
	}
	// DPテーブルをもとに差分を復元
	let i = lenA, j = lenB;
	const resA = [], resB = [];
	while (i > 0 || j > 0) {
		if (i > 0 && j > 0 && aArr[i - 1] === bArr[j - 1]) {
			const esc = escapeChar(aArr[i - 1]);
			resA.unshift(esc);
			resB.unshift(esc);
			i--;
			j--;
		} else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
			// bにだけある部分は追加
			resA.unshift('<b><b/>');
			resB.unshift(`<b>${escapeChar(bArr[j - 1])}<b/>`);
			j--;
		} else {
			// aにだけある部分は削除
			resA.unshift(`<b>${escapeChar(aArr[i - 1])}<b/>`);
			resB.unshift('<b><b/>'); i--;
		}
	}
	return [resA.join(''), resB.join('')];
}

「最長共通部分列（LCS）」とは、2つの文字列に共通して現れる最も長い連続しない部分文字列です。 このアルゴリズムを使うことで、どの部分が変わったのかを正確に検出しています。 差分部分には `<b>` タグでマーキングし、見やすく強調表示しています。

// 入力欄の変更を監視し、差分を更新する
const textA = document.getElementById('textA');
const textB = document.getElementById('textB');
const outputA = document.getElementById('outputA');
const outputB = document.getElementById('outputB');
function updateDiff() {
	const [hA, hB] = diffStrings(textA.value, textB.value);
	outputA.innerHTML = hA;
	outputB.innerHTML = hB;
}
textA.addEventListener('input', updateDiff);
textB.addEventListener('input', updateDiff);

ユーザーが入力欄に文字を入力するたびに差分を再計算して結果を画面に表示します。