文字数カウンター

文字数カウンターです。
単純に「入力された文字列を取得してその長さを出力すればええやろ！」と思い込んでいましたが、サロゲートペアなど様々な要因で意図した文字数が出ないことがあることを初めて知ったので、急遽intl.Segmenterについて調べることになりました...。
文字列周り（文字コード、正規表現とか）についてはまだまだ知識が浅いので強化していかないとな～～～と思いました。あと単語数計測もやろうとしたらintl.Segmenterで数を出すと空白も含んでしまうようだったので、ひとまず今は文字数カウントのみです。
Keyupイベントを拾っているのでマウス操作の貼り付けなどで入力が完結すると正常に動作しないかも。

2025.07.20(SUN)追記

最近になって、「サロゲートペアを1文字で数えるだけなら別にintl.Segmenter使う必要もねえか...」ということに気づいたので、Array.from(input)で配列にしてそのlengthを取るようにしました。

2025.11.29(SAT)追記

機能の切り分けと保守性の向上を目指して書き直しました。
toChars(inputStr), countAllChars(chars), countCharsWithoutSpace(chars)と関数化し、左から順に入力文字の配列化、空白・改行を含めたカウント、空白・改行を含めないカウントと機能を切り分けています。
renderCount(element, label, count)は入力テキストエリア下の文字数の表記を更新する関数です。
テキストエリアのイベントを拾ったときのコールバックでは切り分けで定義したそれらの関数を呼び出すのみとなっています。テキストエリアで拾うイベントもkeyupではなくinputに変更しました。
あとは正直要るかどうか迷いましたが、文字数制限を付けて、それを超えると「文字数オーバーです」と出るようにしました。純粋に文字数カウンターとして使うなら不要かとも思いましたが、文字数制限の機能を付けておけばフォームとかに埋め込むときに使えるかなと思い、付けてみました。この文字数制限はユーザー自身で変更することができるので、気になったら試してみてください。