1. ホーム
2. パソコン
3. javascript

【javascript】文字のカウントの方法、空白を含める場合と含めない場合

投稿日 : 2023年02月13日 更新日 :

やりたいこと

HTML

<div class="wrapper">
  <p>文字 : 
    <span class="text-count">0</span>
      / 空白 : <span class="space-count">0</span>
  </p>
  <textarea class="input-area"></textarea>
</div>

空白文字を含めない場合

展開

// 文字を入力する要素
const input_area = document.querySelector(".input-area");
// 文字数を表示する要素
const textCountElement = document.querySelector(".text-count");
// 空白の数を表示する要素
const spaceCountElement = document.querySelector(".space-count");

// キーボードで入力する場合
input_area.addEventListener("keyup", onChange);
// ペーストした場合
input_area.addEventListener("paste", ()=>{
  setTimeout(onChange, 10)
});

function onChange() {
  let spaceCount = 0;
  const inputText = Array.from(input_area.value);
  const textCount = inputText.length;
  // 正規表現で空白を数をカウント
  inputText.forEach(space => {
    if(space.match(/\s/)){
      spaceCount++
    }          
  });

  // 文字数を表示
  textCountElement.innerHTML = textCount - spaceCount;
  // 空白の数を表示
  spaceCountElement.innerHTML = spaceCount;
}

さらに詳しく

参考

【javascript】正規表現とmatchをつかって特定の文字だけスタイルを変える

空白文字を含める場合

function onChange() {
  const inputText = Array.from(input_area.value);
  const textCount = inputText.length;

  textCountElement.innerHTML = textCount;
}

まとめ