JavaScriptで入力した文字数をカウントする

フォームの文字数制限があるフィールドでたまに見かける、入力した文字数や残り文字数が表示される処理を実装してみます。

サンプルコード

まずはシンプルに入力文字数を表示する実装を試してみます。

<textarea id="field"></textarea>
<div id="result"></div>

textareaに対してinputイベントを設定して、lengthで取得した文字数を#resultに出力します。

const textarea = document.getElementById('field');
textarea.addEventListener('input', function() {
  // 入力した文字を取得
  const thisVal = this.value;
  // 文字数をカウント
  const charCount = thisVal.length;
  // 文字数を表示
  document.getElementById('result').innerText = '文字数: ' + charCount;
});

入力した文字数を表示するデモページ

入力できる残り文字数も表示したい場合は以下のようになります。

const textarea = document.getElementById('field');
textarea.addEventListener('input', function() {
  // 入力文字数の上限
  const maxCount = 30;
  // 入力した文字を取得
  const thisVal = this.value;
  // 文字数をカウント
  const charCount = thisVal.length;
  // 文字数を表示
  document.getElementById('result').innerText = '文字数: ' + charCount + '  残り: ' + (maxCount - charCount);
});

入力できる残り文字数を表示するデモページ

簡易的な実装であれば上記でも問題なさそうなのですが、案件の仕様によっては調整が必要な点がいくつかあります。
まずtextareaで改行した際、その改行も文字数としてカウントされてしまう点です。

改行を文字数のカウントに含めないようにしてみます。

const textarea = document.getElementById('field');
textarea.addEventListener('input', function() {
  // 入力した文字を取得
  let thisVal = this.value;
  // 改行を除去
  thisVal = thisVal.replace(/\n/g, '');
  // 文字数をカウント
  const charCount = thisVal.length;
  // 文字数を表示
  document.getElementById('result').innerText = '文字数: ' + charCount;
});

改行を文字数に含めないようにするデモページ

次に絵文字など一部テキストが正しく取得できない点です。
例えばtextareaで🚓🐾と入力した場合、4文字としてカウントされます。

for文で1文字ずつconsoleに表示してみるとわかりますが、絵文字を入力した場合は意図した形で取得ができていません。

const textarea = document.getElementById('field');
textarea.addEventListener('input', function() {
  // 入力した文字を取得
  let thisVal = this.value;
  // 改行を除去
  thisVal = thisVal.replace(/\n/g, '');
  // 文字数をカウント
  const charCount = thisVal.length;
  // 1文字ずつ分解して確認する
  for (var i = 0; i < thisVal.length; i++) {
    console.log(thisVal[i]);
  }
  // 文字数を表示
  document.getElementById('result').innerText = '文字数: ' + charCount;
});

1文字ずつconsoleに出力して確認するデモページ

対策として、文字列のlengthで文字数を調べるのではなく、Array.from()で配列してから文字数を調べるようにするといいようです。

const textarea = document.getElementById('field');
textarea.addEventListener('input', function() {
  // 入力した文字を取得
  let thisVal = this.value;
  // 改行を除去
  thisVal = thisVal.replace(/\n/g, '');
  // 文字数をカウント
  const charCount = Array.from(thisVal).length;
  // 配列にして確認する
  console.log(Array.from(thisVal));
  // 文字数を表示
  document.getElementById('result').innerText = '文字数: ' + charCount;
});

Array.from()で配列にした結果をconsoleに表示していますが、絵文字の場合も意図したように取得できているのが確認できます。
Array.from()で文字数を取得するデモページ

次は派生になりますが、X(Twitter)のポストで実装されているような、半角と全角で文字数の扱いを変える実装を試してみます。
半角の場合は1文字、全角の場合は2文字として実装してみます。

const textarea = document.getElementById('field');
textarea.addEventListener('input', function() {
  // 入力した文字を取得
  let thisVal = this.value;
  // 改行を除去
  thisVal = thisVal.replace(/\n/g, '');
  // 文字数をカウント
  const charCount = Array.from(thisVal).reduce(function (count, char) {
    // 半角文字の場合は1文字、それ以外は2文字としてカウント
    return count + (char.match(/^[\u0020-\u007E\uFF61-\uFF9F]+$/) ? 1 : 2);
  }, 0);
  // 文字数を表示
  document.getElementById('result').innerText = '文字数: ' + charCount;
});

基本的には前述のArray.from()を使う方法をベースに、1文字ずつ半角かどうかをチェックしてカウントしています。
半角と全角でデモページ

最後に試しながら気になったので、maxLength属性を設定した場合の文字数の扱いがどうなっているかを試してみます。
maxlengthで10を設定してみます。

<textarea id="field" maxlength="10" placeholder="maxlength:10"></textarea>

maxlength設定のデモページ

例えば1〜0 の10文字を入力しようとした時、改行していない場合は入力できますが、以下のように途中で改行を行なった場合は9までしか入力できません。

改行が含まれる場合は最初にlengthで試した時のように、1文字としてカウントされるようです。

12345
6789

次に先頭に絵文字を追加した状態で1〜0の10文字を入力しようとすると、以下のように8までした入力できませんでした。
🚓などの絵文字の扱いも最初の例のように、2文字としてカウントされるようです。