【jQuery/JS】文字数をカウントする完全ガイド｜リアルタイム・残り文字数・上限警告・バイト数・絵文字対応まで

Twitter/Xのような文字数制限付き投稿フォームや、SEO対策のメタ説明文入力など、リアルタイムで文字数をカウントしてフィードバックを与えるUIは多くの場面で必要です。この記事では基本的なカウントから残り文字数・上限警告・バイト数カウント・絵文字対応まで解説します。

基本: リアルタイム文字数カウント

<textarea id="my-textarea" maxlength="200" placeholder="テキストを入力..."></textarea>
<p><span id="char-count">0</span> / 200 文字</p>

$(function () {
  $('#my-textarea').on('input', function () {
    var count = $(this).val().length;
    $('#char-count').text(count);
  });
});

残り文字数の表示と上限警告

<textarea id="tweet-area" placeholder="入力してください..."></textarea>
<p>残り <span id="remain-count">140</span> 文字</p>

#remain-count.is-warning { color: #f59e0b; font-weight: bold; }
#remain-count.is-danger  { color: #ef4444; font-weight: bold; }

$(function () {
  var MAX = 140;

  $('#tweet-area').on('input', function () {
    var count   = $(this).val().length;
    var remain  = MAX - count;
    var $remain = $('#remain-count');

    $remain.text(remain);

    // 残り文字数に応じてクラスを付与
    $remain
      .toggleClass('is-warning', remain <= 20 && remain > 0)
      .toggleClass('is-danger',  remain <= 0);

    // 上限を超えた場合は送信ボタンを無効化
    $('#submit-btn').prop('disabled', remain < 0);
  });
});

上限文字数を超えて入力できないようにする

maxlength 属性はシンプルですが、貼り付け（ペースト）でも制限されます。JavaScriptで細かく制御する場合は以下のようにします。

$(function () {
  var MAX = 100;

  $('#my-textarea').on('input', function () {
    var val = $(this).val();

    // 上限を超えたらトリミング（ペースト対策）
    if (val.length > MAX) {
      $(this).val(val.slice(0, MAX));
    }

    $('#char-count').text(Math.min(val.length, MAX));
  });
});

バイト数カウント（全角2バイト・半角1バイト）

データベースのVARCHARや外部APIの制限がバイト数で指定されている場合のカウント方法です。

// 全角2バイト・半角1バイトとして計算
function byteLength(str) {
  var count = 0;
  for (var i = 0; i < str.length; i++) {
    var code = str.charCodeAt(i);
    count += (code > 255) ? 2 : 1; // 全角: 2バイト, 半角: 1バイト
  }
  return count;
}

$(function () {
  $('#my-input').on('input', function () {
    var bytes = byteLength($(this).val());
    $('#byte-count').text(bytes);
  });
});

絵文字（サロゲートペア）を正確にカウントする

JavaScriptの String.length は絵文字（?など）を2文字としてカウントします。Spread演算子 または [...str].length で正確にカウントできます。

// 絵文字を1文字としてカウント
function countChars(str) {
  return [...str].length; // Spread演算子でサロゲートペアを1文字として扱う
}

$(function () {
  $('#my-textarea').on('input', function () {
    var val   = $(this).val();
    var count = countChars(val);
    $('#char-count').text(count);
  });
});

// 比較
var str = '?hello';
console.log(str.length);         // 7（?が2文字と数えられる）
console.log([...str].length);    // 6（?が1文字として数えられる）

カウント方法の比較

まとめ

jQueryで文字数カウントを実装する際のポイントをまとめます。

• 基本: input イベント + val().length
• 残り文字数: MAX - count で計算し、0以下で警告スタイル
• 上限制限: maxlength 属性 + ペースト対策で slice(0, MAX)
• バイト数: 全角2・半角1で独自関数を用意
• 絵文字対応: [...str].length でサロゲートペアを1文字として扱う

関連記事: フォームバリデーション完全ガイド / 文字数が一定以上の場合に省略する方法

よくある質問（FAQ）