以前ここで「jQueryで入力フォームに文字カウント（カウントダウン）を設置する方法」と題して
入力フォームの文字数の値（value）を取得して
文字数カウントダウンを設置する方法を紹介しましたが
valueの値ではなくて＜p＞タグなど通常のコンテンツ要素の
文字数の値を取得するやり方について紹介してみます。
jQueryでコンテンツ要素の文字数を取得するパターン
まずシンプルな記述方法として
◆SCRIPT $(●●●●).text().length;
単純にこれだけの記述でコンテンツ要素の文字数は取得することができます。
この「.text().length;」で文字数を取得する場合は
入力されている文字列に含まれるスペースや改行なども1文字としてカウントされる為
使用する場面によっては実際に取得したい値と変わってきてしまう可能性もあるかと思います。
その様な場合で、文字列の中のスペースや改行は
文字数カウントに含めないように取得する場合の記述方法は以下の様になります。
◆SCRIPT $(●●●●).text().replace(/\s+/g,'').length;
この様な記述にすることによって
文字列の中のスペースや改行を省いた値での文字数カウントを取得することが可能になります。
文字数取得の動作サンプルとして、
以下のような＜p＞タグに入力された文字数があった場合
◆HTML <p>12345 67890<br> １２３４５ ６７８９０<br> あいうえお かきくけこ</p>
この＜p＞タグ内の文字列を
上記の2パターンで取得する場合のスクリプトは
◆SCRIPT
$('p').text().length;
$('p').text().replace(/\s+/g,'').length;
この様になり、
これらを実行させて値をページ上に表示すると以下のような感じになります。
スペースや改行を含めた「$(●●●●).text().length;」と
スペースや改行を省いた「$(●●●●).text().replace(/\s+/g,”).length;」での
それぞれの値の違いが確認できると思います。
使用する場面でそれぞれ使い分けに注意する必要があるかと思いますが
スクリプト処理でテキストも文字数の値が必要になった際にぜひ。。。