入力した文字数をカウント

コード例 - Sample

HTML

<div class="example-sample">
 <!--入力部-->
 <div class="sample-box1">
  <textarea id="in1"></textarea>
 </div>

 <!--出力部-->
 <div class="sample-box2">
  <p>
   <span class="guide">文字数：</span>
   <span class="text" id="out1"><!--ここに文字数出力--></span>
  </p>
  <p>
   <span class="guide">バイト数：</span>
   <span class="text" id="out2"><!--ここにバイト数出力--></span>（UTF-8）
  </p>
  <p>
   <span class="guide">入力テキスト：</span>
   <span class="text" id="out3"><!--ここに入力テキスト出力--></span>
  </p>
 </div>
  <p>
   <span class="guide">エンコード文字：</span>
   <span class="text" id="out4"><!--ここにエンコード文字出力--></span>
  </p>
 </div>
</div>

CSS

<style>
.example-sample>.sample-box1{
 margin-bottom: 1rem;
}
.example-sample>.sample-box1>textarea{
 display: block;
 width: 80%;
 font-size: 0.9rem;
 line-height: 1.2em;
 background-color: #e5e5e5;
 border: 1px solid #000;
}
.example-sample>.sample-box2>p{
 font-size: 14px;
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 line-height: 1.5em;
}
.example-sample>.sample-box2>p:not(:last-child){
 margin-bottom: 0.5em;
}
.example-sample>.sample-box2>p>.guide{
 min-width: 9em;
 text-align: right;
}
.example-sample>.sample-box2>p>.text{
 font-weight: bold;
 color: blue;
 word-break: break-all;
}
</style>

JavaScript

<script>
//キーアップでイベント動作
document.getElementById('in1').addEventListener('keyup', function(){
 //textareaに入力した内容を変数に格納
 let e1 = this.value;

 /*
 ①「length」で「e1」に格納した文字数をカウント
 ②カウントした数字を「innerText」で出力
 */
 document.getElementById('out1').innerText = e1.length;

 /*
 ①「encodeURIComponent」で「e1」に格納した文字をエンコード
 ②エンコードした文字列を「*」に置き換え「*」の数「length」でカウント
 ③カウントした数字を「innerText」で出力
 */
 document.getElementById('out2').innerText = encodeURIComponent(e1).replace(/%[0-9A-F]{2}/g, '*').length;

 //入力した内容を「innerText」で出力
 document.getElementById('out3').innerText = e1;

 /*
 ①「encodeURIComponent」で「e1」に格納した文字をエンコード
 ②エンコードした文字を「innerText」で出力
 */
 document.getElementById('out4').innerText = encodeURIComponent(e1);
});
</script>