Tips

【コピペ1行】JavaScriptで文字数を数える方法

  • このエントリーをはてなブックマークに追加

Web制作やアプリ開発では「文字数を数える」という瞬間がよくあります。

例えば入力欄の作成で、「何文字が入力されたか?」を機能として盛り込むことです。

実は文字を数えるのはとても簡単な実装です。

とはいえ状況によってはちょっとしたバグにも遭遇するかもしれないので、JavaScriptで文字を数える方法を解説していきます。

「入力欄は作れるけど、チェック機能までは作れないデザイナー」
「何となくJavaScriptに対して苦手意識があって自分で作る気になれない」
「文字カウントはコピペでいつも終わらせていてデバックまでやったことはない」

本日はそんな方に知ってもらいたい内容です。

こちら動画も用意しているので併せてどうぞ。

JavaScriptで文字を数える方法

結論、JavaScriptでは以下のように書くことで文字をカウントすることができます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
  <script src="./script.js" defer></script>
</head>
<body>
  <textarea class="textarea" cols="30" rows="10"></textarea>
  <p><span class="string_num">0</span>文字入力中です</p>
</body>
</html>
const textarea = document.querySelector(".textarea");

const string_num = document.querySelector(".string_num");

textarea.addEventListener("keyup",onkeyup);

function onkeyup(){
  const inputText = textarea.value;
  string_num.innerHTML = inputText.length;
}

addEventListenerの部分はデモなので理解できなくても大丈夫です。

肝心なのはonkeyup関数の「length」という部分です。

カウントしたい文字列が格納された対象に続けて「length」を書くだけです。

とても簡単ですね、これくらいならゴリゴリのエンジニアでなくとも対応できそうです。

実行結果は以下のようになります。

Twitterみたいな感じですね。

しかしながら実はちょっとした落とし穴があるんです。

JavaScriptで絵文字を数える方法

例えば以下のように絵文字も入れてみましょう。

目視で数えてほしいのですが、11文字なんですよね。

ただ表示としては12文字となってしまっています。

ここでは深く解説しないのですが文字は「バイト」という単位で管理されていることが原因です。

ブラウザでは「1文字=2バイト」という解釈になっているところ、絵文字は「1文字=4バイト」となっています。

そのため絵文字に関しては「length」を使うと2文字とカウントされてしまいます。

より詳しい話は「サロゲートペア」とググってみると良いでしょう。

ちなみに絵文字だけではなく「魚のホッケ」など一部の漢字にも起きる現象なので、地味に無視できない問題なんですよね。

※WordPressでも「魚のホッケ」を漢字で入力するとデータベースが更新されなかったりします(泣)

サロゲートペアを解決したうえで文字を数えるには以下のように修正します。

const textarea = document.querySelector(".textarea");

const string_num = document.querySelector(".string_num");

textarea.addEventListener("keyup",onkeyup);

function onkeyup(){
  const inputText = textarea.value;
  string_num.innerHTML = Array.from(inputText).length;
}

「Array.from」という関数がJavaScriptには用意されていて、引数にカウントしたい対象を格納しておくことで、「length」を使った文字のカウントが正確に実行されます。

正しく11文字と出力されていますね。

いずれにしても1行の簡単なコードで文字を数えることができるので、ぜひ試してみてください。

  • このエントリーをはてなブックマークに追加

コメントを残す

*