最近テキストを書く際に文字数がどれだけあるのかを確認する機会が多く、その都度 Google 検索して適当な Web アプリを開くのが面倒になってきたので、自分で作ることにした。
で、開発したのが以下の「文字数をカウントするツール」だ。
文字数をカウントするツール | tools.loumo.jp
ページ内にあるテキストエリアに文字を打ち込んだりコピペなどするとリアルタイムで文字数をカウントし、表示するツールだ。文字数以外にも空白等を削除した文字数・単語数・文章内に占める漢字の割合・原稿用紙換算で何枚になるか・UTF-8バイト数・目標となる文字数及び単語数との差を計算し表示する。名前がそのまますぎるが良いのが思いついたら変える。
最初は文字数の計算なんて String.length 使えば簡単にできるだろと思っていたのだが、ちゃんと調べてみるとそんな単純ではなかった。というのも JavaScript の String は内部的には UTF-16 で表現されているため、UTF-16 の範囲のおさまらない文字(異字体・絵文字・海外の文字等)が入ると文字数を正確にカウントすることができない。
どのような仕様になっているのか、詳しくは以下の記事が勉強になる。
JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io Unicode in JavaScript#Get the proper length of a string詳しい話は省略するが、人間が認識する文字の長さを計算するのであれば、Grapheme Cluster を利用する。
Grapheme Cluster の解説については以下の記事がわかりやすい。
Unicodeのgrapheme cluster (書記素クラスタ) | hydroculのメモこれを一から実装するのは骨が折れるのでライブラリを利用しよう。以下の grapheme-splitter を利用すると良い感じになる。
orling/grapheme-splitter: A JavaScript library that breaks strings into their individual user-perceived characters.これで解決。
-- 2024-05-14 追記
JavaScript 標準にある Intl.segmenter を利用すると外部ライブラリを使う必要がなくなる。以前はブラウザによっては利用できなかったのだが、Firefox 125 が先月リリースされたため、主要ブラウザすべてで対応されることになった。今後はこちらを利用しよう。
Intl.Segmenter - JavaScript | MDN-- 追記終わり
というわけで Web ツールを一つ作ったという報告でした。