JavaScript 備忘録 | メシのタネ

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

【jQuery】地味に便利な文字列に対して処理を行うメソッド

 2014/10/24

実はこのブログの検索ワードの1位はなんと
jQuery文字列なんです。そのワードで着た人は300人/月くらいですが、
僕のサイトでは多い方なので、文字列関係のメソッドを今日は紹介していけたらなと
そう思いまして、今日はこれについて書こうと思いました。

目次

文字の長さを取得する
文字の変換
文字列を取得

文字の長さを取得する

文字の長さにするには、まず要素内の文字をtextメソッドを使って
タグ以外の文字列を取得して、lengthプロパティを参照します。
こうすることで、要素内の文字数が何文字なのかを知ることができます。


jQuery(function(){

     var sCount = jQuery("body").text().replace(/\s+/g,'').length
     alert(sCount)

});

replaceメソッド

文字列を変換するメソッドであります。第一引数に交換したい値を入れて第二引数に交換先の値を入れます。
今回は空白としたいので、”って風にしてあります。

第一引数の\sですがこれは、正規表現を使って、spaceとかtabとか改行とかをさしています。

つまり\sというのは、

    [ \f\n\r\t\v\u00A0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u2028\u2029\u2028\u2029\u202f\u205f\u3000]

こいつらのことです。これを\sの変わりに書けば同じ事が可能ですが、
全部書くのはやはりちょっと面倒くさいので、\sがあるんだと思います。

次に\gではなく/gについてですが、これは正規表現のオプションです。
正規表現の終わりの文字はオプションだという風に覚えて下さい。このオプションの意味は全部検索を行うという意味です。
ほかにもiとmがあり、iは大文字、小文字を区別しないという意味で、mは行頭か行末に一致するものって意味らしいです。

ちょっとこれをやり過ぎると趣旨が変わってくるので、もっと正規表現やりたーいって人は
JavaScript 標準ライブラリ RegExpでも見て勉強してください。きっとなれます。

文字の変換

replaceメソッドの続きになります。
文字列Heにマッチしたら、これに置き換えるという風に書いてます。


var c = jQuery("#str").text().replace(/He/g,'Hello World')
alert(c)

この時変数cの値はHello Worldになりますが、
HTMLのIDのstrのテキストノード(タグ以外の文字)は
変化しないということを覚えておいて下さい。

テキストノードを変更する

ブラウザ上の文字も変えたいのであれば、ちょっと工夫する必要があります。

決め打ちで良い場合

要素内の文字が1文しかない場合は


<p id="str">もげりっこ</p>

jQuery("#str").text("aaaa")

こんな感じじゃダメでしょうか。

決め打ちできない場合

例えば、このほげもげをもげもげに変更したい場合


<p id="terms">ほげもげ</p>

var r = jQuery("#terms").text().replace(/ほげ/g,'もげ')
jQuery("#terms").text(r)

一行目でテキストノードを取得しつつreplaceメソッドで該当テキストノードに変換を加える。
そいつを変数に入れておき、その変数を指定箇所に適用するという一例を挙げて見ます。
もちろんこれ以外にもやり方は沢山あるので、考えてみてください。

文字列を取得

順番間違えましたが、こうします。


var r = jQuery("#terms").text()

要素内のテキストノードとマッチするセレクタ

要素内の特定の文字に対して処理を行える状態にする方法です。
これはもうサンプル見てもらうのが良いと思います。


<p id="terms">もげもげ</p>
jQuery("#terms:contains('もげ')").text("あべし")

このpのもげもげがあべしになります。

コード

今日のコードはFiddleに書いておいたのでまたみてみてくださいー。


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

コメント

"【jQuery】地味に便利な文字列に対して処理を行うメソッド"
でメシのタネのおすすめを検索したよ!

プログラミング備忘録 | メシのタネ