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

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

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

◆SCRIPT
$(●●●●).text().length;

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

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

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

◆SCRIPT
$(●●●●).text().replace(/\s+/g,'').length;

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

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

◆HTML
<p>12345 67890<br>
12345 67890<br>
あいうえお かきくけこ</p>

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

◆SCRIPT
$('p').text().length;
$('p').text().replace(/\s+/g,'').length;

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

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

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

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner