【Javascript】テキストエリアの文字列のバイト数を数える

Tweet

Category JavaScript 2012/05/27

問題

Javascriptで、テキストエリアに入力した文字列のバイト数を数えてください。

答え

demo

source

<textarea onkeyup="document.getElementById('xxxx').value=encodeURI(this.value).replace(/%[0-9A-F]{2}/g, '*').length"></textarea>

テキストエリアの文字列の文字数は <input type="text" id="xxxx"> 文字です。

補足・解説

• encodeURIでパーセントエンコードしてから数えてみました。
• encodeURI(“あいう123”)の結果は、”%E3%81%82%E3%81%84%E3%81%86123″となるので、%何々の個数と、変換されない英数記号の個数を数えました。

  %E3 %81 %82 %E3 %81 %84 %E3 %81 %86 1 2 3 → 12バイト

• そのため、UTF-8のときのバイト数です。つまり、たいていの全角文字は3バイトになります。

  >>>  encodeURI("あ")
  "%E3%81%82"
  

• ホッケは4バイトです。

  >>> encodeURI("𩸽")
  "%F0%A9%B8%BD"
  

  参考： UTF-8で4バイトになる文字

関連記事

【Javascript】テキストエリアに入力した文字数を数える