【javascript】文字のカウントの方法、空白を含める場合と含めない場合
やりたいこと
以下のような、入力した文字をjavascriptで数える方法を解説します。 デモは空白がカウントされないようになっていますが、 空白も文字数としてカウントする方法と、両方解説します。
HTML
空白文字もカウントするバージョンです。 必要なければ、4行目をカット してください。
<div class="wrapper">
<p>文字 :
<span class="text-count">0</span>
/ 空白 : <span class="space-count">0</span>
</p>
<textarea class="input-area"></textarea>
</div>空白文字を含めない場合
1-6行目 : 要素を取得
9行目 : キーボードで入力した場合の処理
11行目 : コピペした場合の処理
15行目 : 文字をカウントする関数
// 文字を入力する要素
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;
}さらに詳しく
11-13行目
テキストエリアにキーボードを使って入力するなら
問題ないのですが、コピペの場合、
input_area.addEventListener("paste", ()=>{});
が必要になります。
この場合、pasteの瞬間に、まだ文字が入力されておらず、 取得できないので、 setTimeoutを使い、0.01秒後に文字を取得します。
17行目
Array.from()を使わないと、 絵文字ひとつが2文字に カウントされてしまう。
参考
【javascript】正規表現とmatchをつかって特定の文字だけスタイルを変える
空白文字を含める場合
空白も文字数としてカウントする場合は、もっとシンプルになります。
function onChange() {
const inputText = Array.from(input_area.value);
const textCount = inputText.length;
textCountElement.innerHTML = textCount;
}まとめ
- キーボード入力とコピペした時の両方の処理をする。
- paste処理の瞬間に、まだ文字が入力されておらず、 取得できないので、 setTimeoutを使い、0.01秒後に文字を取得。
- 取得した文字にarray.from()を使うことで、 より正確な数値が出せる。
