【jQuery】文字数・バイト数をカウントしよう！

今回は、jQueryで文字数・バイト数をカウントする方法について説明します。※この記事を読むことで、文字数・バイト数（全角、半角、改行）カウントの仕組みを知ることができます

文字数　：　 0

バイト数　：　 0

改行数　：　 0

まずは上記のコードで動作を試してみてください。半角は1バイト、全角または改行を2バイト、その他の文字は３バイトでカウントするようにしています。

文字数をカウントする
バイト数・改行数をカウントする
サンプルコード
まとめ

文字数をカウントする

文字数をカウントするには、lengthを使用します。上記のコードでは、テキストエリアの値を取得しlengthでカウントしています。

// テキストエリア
<textarea id="myTextarea" rows="4" cols="50"></textarea>

// idでテキストエリアの値を取得
let text = $('#myTextarea').val();
// text.length で文字数を取得
let charLength = text.length;

バイト数・改行数をカウントする

バイト数・改行数をカウントするために、上記のコードでは関数をgetByteLengthという関数を作ってカウントしています。

// str はテキストエリアの値「 $('#myTextarea').val();」です
function getByteLength(str) {
      let byteLength = 0;
      for (let i = 0; i < str.length; i++) {
        let charCode = str.charCodeAt(i);
        if (charCode === 10 || charCode === 13) { // 改行文字 (LF または CR)
          byteLength += 2;
        } else if (charCode <= 0x7F) {
          byteLength += 1; // 半角文字は1バイト
        } else if (charCode <= 0xFFFF) {
          byteLength += 2; // 全角文字は2バイト
        } else {
          byteLength += 3; // その他の文字は3バイト
        }
      }
      return byteLength;
    }

charCodeAt関数は、文字列内にある文字のユニコード（Unicode）値を取得するために使用します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
  <title>文字数とバイト数チェック</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .count-container {
      display: flex;
      align-items: center;
      margin-top: 10px;
    }
    .count-label {
      width: 80px; /* 各ラベルの幅を固定 */
    }
    .count-value {
      margin-left: 5px;
    }
  </style>
</head>
<body>

<textarea id="myTextarea" rows="4" cols="50"></textarea>
<div class="count-container">
  <span class="count-label">文字数：</span>
  <span class="count-value" id="charCount">0</span>
</div>
<div class="count-container">
  <span class="count-label">バイト数：</span>
  <span class="count-value" id="byteCount">0</span>
</div>
<div class="count-container">
  <span class="count-label">改行数：</span>
  <span class="count-value" id="newlineCount">0</span>
</div>

<script>
  $(document).ready(function() {
    function getByteLength(str) {
      let byteLength = 0;
      for (let i = 0; i < str.length; i++) {
        let charCode = str.charCodeAt(i);
        if (charCode === 10 || charCode === 13) { // 改行文字 (LF または CR)
          byteLength += 2;
        } else if (charCode <= 0x7F) {
          byteLength += 1; // 半角文字は1バイト
        } else if (charCode <= 0xFFFF) {
          byteLength += 2; // 全角文字は2バイト
        } else {
          byteLength += 3; // その他の文字は3バイト
        }
      }
      return byteLength;
    }

    $('#myTextarea').on('input', function() {
      let text = $(this).val();
      let charLength = text.length;
      let byteLength = getByteLength(text);
      let newlineCount = (text.match(/[\r\n]/g) || []).length;

      $('#charCount').text(charLength);
      $('#byteCount').text(byteLength);
      $('#newlineCount').text(newlineCount);
    });
  });
</script>

</body>
</html>

まとめ

バイト数をカウントする場合は、charCodeAt関数を使って値が半角なのか全角なのか改行なのかを判断しています。ぜひ、サンプルコードを参考にいろいろ試してみてください！