ブラウザ上で完結するシンプルな差分検出ツールです。 2つのテキストの変更点(追加・削除された部分)を左右分割で視覚的に分かりやすくハイライトします。
- 完全ローカル動作: サーバー通信を行わず、すべてブラウザ上で処理されるため、機密情報や長文の比較も安全かつ高速に行えます。
- デュアルペイン(左右分割)表示: 左側に元のテキスト(削除部分を青色でハイライト)、右側に新しいテキスト(追加部分を緑色でハイライト)を表示する本家準拠のデザインです。
- 選べる比較モード: 用途に合わせて「文字単位」「単語単位」「行単位」の3種類から比較の粒度を切り替えられます。
- 文字数カウント: 入力されたテキストの文字数をリアルタイムに近い形で確認できます(比較実行時に更新)。
- XSS対策済み: 入力されたテキスト内のHTMLタグは安全にエスケープ処理されるため、コードの比較にも利用できます。
- 環境構築やインストールは不要です。
- 本リポジトリの
index.htmlをダウンロードし、お使いのWebブラウザ(Google Chrome, Microsoft Edge, Safariなど)で開きます。 - 左側のテキストエリアに「元のテキスト(変更前)」を入力またはペーストします。
- 右側のテキストエリアに「新しいテキスト(変更後)」を入力またはペーストします。
- 比較モード(文字・単語・行)を選択します(日本語の文章には「文字単位」がおすすめです)。
- 「比較する」ボタンをクリックすると、下部に差分結果が表示されます。
- HTML / CSS / Vanilla JavaScript: UIと基本的なロジックの構築。
- jsdiff (v7.0.0): 高精度なテキスト差分解析ライブラリ。CDN経由で読み込んで使用しています。