WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

jQueryでコンテンツ要素の文字数を取得するパターン

以前ここで「jQueryで入力フォームに文字カウント(カウントダウン)を設置する方法」と題して
入力フォームの文字数の値(value)を取得して
文字数カウントダウンを設置する方法を紹介しましたが
valueの値ではなくて<p>タグなど通常のコンテンツ要素の
文字数の値を取得するやり方について紹介してみます。

jQueryでコンテンツ要素の文字数を取得するパターン

まずシンプルな記述方法として

[javascript]
◆SCRIPT
$(●●●●).text().length;
[/javascript]

単純にこれだけの記述でコンテンツ要素の文字数は取得することができます。

この「.text().length;」で文字数を取得する場合は
入力されている文字列に含まれるスペースや改行なども1文字としてカウントされる為
使用する場面によっては実際に取得したい値と変わってきてしまう可能性もあるかと思います。

その様な場合で、文字列の中のスペースや改行は
文字数カウントに含めないように取得する場合の記述方法は以下の様になります。

[javascript]
◆SCRIPT
$(●●●●).text().replace(/\s+/g,”).length;
[/javascript]

この様な記述にすることによって
文字列の中のスペースや改行を省いた値での文字数カウントを取得することが可能になります。

文字数取得の動作サンプルとして、
以下のような<p>タグに入力された文字数があった場合

[html]
◆HTML

12345 67890
12345 67890
あいうえお かきくけこ

[/html]

この<p>タグ内の文字列を
上記の2パターンで取得する場合のスクリプトは

[javascript]
◆SCRIPT
$(‘p’).text().length;
$(‘p’).text().replace(/\s+/g,”).length;
[/javascript]

この様になり、
これらを実行させて値をページ上に表示すると以下のような感じになります。

スペースや改行を含めた「$(●●●●).text().length;」と
スペースや改行を省いた「$(●●●●).text().replace(/\s+/g,”).length;」での
それぞれの値の違いが確認できると思います。

使用する場面でそれぞれ使い分けに注意する必要があるかと思いますが
スクリプト処理でテキストも文字数の値が必要になった際にぜひ。。。

サンプルファイルをダウンロードしたい方はこちらから

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です