Javascript と HTML で diff を表示します。
行単位のみやワード単位のみのサンプルはネットでちょくちょく見かけていたのですが、「行単位の差分を表示した上で類似行の差分も表示する」のが欲しかったので、作ってみました。
Ecmascript 6 以降の機能を使用しているので、IE11では動きません。
FirefoxかChromeかEdgeをご利用ください。
2020/04/05 いろいろ修正しました。
- 単語区切りで、小書き仮名拡張 (Unicode 12)、統合漢字 Extention G (Unicode 13) に対応してみた。
……ついでにsurrogate pair判定のバグを修正 orz - Chrome, Firefox, Edge, Opera で Optional Chaining が使用可能になったので、Optional Chaining で書けるところを書き直し。
- indent heuristic の処理を修正。１行だけの差異行は、境界位置をずらさないようにした。
2020/07/17 さらに修正しました。
- 変更行のマーカーを「*」から「!」に変更。
- 変数のスペルミスを修正。
- 統合漢字 Extention G の判定を修正。
2021/01/08 さらに修正しました。
- 片仮名合字「トモ」U+2A708 の判定処理を追加。
2021/09/05 さらに修正しました。
- 改行の区切り判定を改善。
2022/08/06
- 現物をGitHub Pagesに掲載しました。ソースコードは、ブラウザの「ページのソースを表示」メニューなどでご覧ください。
- https://stonee-k.github.io/my_archives/diff_orz.html
内部の仕様に関する解説は、ページ最下部のリンクからどうぞ。