jqueryに詳しい方に質問です。
p要素内の文字数を取得したいのですがどうもうまくできません。
詳しい方、どうかご教示ください。よろしくお願いいたします。
<p>ここの文字数を取得</p>
$(’p’).text().lengthで取れるはずです。
全てのpタグ内の文字数ということであれば
var count = 0;$( ’p’ ).each(function(){ count += $( this ).text().length;});
改行してたり、インデント入れてたりすると負可視文字が入ってしまうので、文字数がその分カウントされてしまいます。なので以下のように左右の空白文字および負可視文字をtrimメソッドで削除するとおそらく想定している文字数が返ってくるかと思います。
$('p').text().trim().length;
負可視 → 不可視誤字です。
それなら、.text().replace( /\s+/g, ’’ ).length の方が良いかと
横から質問。 .text().replace( /\s+/g, ’’ ).length と .text().trim().length には明確な差があるんでしょうか？
コメ主です。trim()は文字列の先頭と末尾の空白文字に対して、replace( /\s+/g, ’’ )はすべての空白文字に対してです。なので行いたい処理に応じて使い分けるのが良いかと思います。ちなみに、trim()はjQueryのメソッドなのでjQueryのチェーンメソッドに向いているかもですが、結局正規表現を使っての処理なのでreplaceの方が早いかもしれないですね。
一つ上の「コメント」に対しての回答です。場所間違えました。
あと私は未検証ですが「\s」はブラウザ間の互換性が無いという検証結果もある様です。検証してから使用すると良いかもです。
一つ上のコメントで質問した者です。丁寧な回答ありがとうございました。よく分かりました。ついでに、処理速度について検証してみましたが、確かに正規表現のほうが早かったです。勉強になりました。ありがとうございました！
トピ主です。
皆様、とても参考になりました。ありがとうございました。
みんなの回答 5 件
$(’p’).text().length
で取れるはずです。
全てのpタグ内の文字数ということであれば
var count = 0;
$( ’p’ ).each(function(){
count += $( this ).text().length;
});
改行してたり、インデント入れてたりすると負可視文字が入ってしまうので、文字数がその分カウントされてしまいます。なので以下のように左右の空白文字および負可視文字をtrimメソッドで削除するとおそらく想定している文字数が返ってくるかと思います。
$('p').text().trim().length;コメ主です。
trim()は文字列の先頭と末尾の空白文字に対して、
replace( /\s+/g, ’’ )はすべての空白文字に対してです。
なので行いたい処理に応じて使い分けるのが良いかと思います。
ちなみに、trim()はjQueryのメソッドなのでjQueryのチェーンメソッドに向いているかもですが、
結局正規表現を使っての処理なのでreplaceの方が早いかもしれないですね。
トピ主です。
皆様、とても参考になりました。
ありがとうございました。
関連するトピックス