【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文字に カウントされてしまう。
参考

空白文字を含める場合
空白も文字数としてカウントする場合は、もっとシンプルになります。
function onChange() {
const inputText = Array.from(input_area.value);
const textCount = inputText.length;
textCountElement.innerHTML = textCount;
}
まとめ
- キーボード入力とコピペした時の両方の処理をする。
- paste処理の瞬間に、まだ文字が入力されておらず、 取得できないので、 setTimeoutを使い、0.01秒後に文字を取得。
- 取得した文字にarray.from()を使うことで、 より正確な数値が出せる。
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを2つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは?window.innerHeightとは?window.pageYOffsetとは?
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript(Object.entries)を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク