jqueryの正規表現について。

質問

こんばんは。
最近jqueryを始めた初心者です。
ロールオーバーするとattrして、replaceして画像を変える
下記のような仕組みについてなのですが、

$(this).hover(function(){
$(this).attr('src', $(this).attr('src').replace(/^(.+)(\.[a-zA-Z]+)$/, '$1_on$2'));

この正規表現について分からないところがあります。
まず、この正規表現では、
文字列の最後から、

$1（.[ドット])
と
$2(.[アルファベッド]）の間に”_on”が入るという事だと私は認識していますが、
取得するデータが
gnav_01.png
のような場合の時は
gnav_01_on.png

"1"と"."の間に_onが入って来ています。
ちょっと分からなくなってしまったので、
どなたかもしよろしければお教え頂ければありがたいです。

回答No.3

ixkaito · ベストアンサー

>最初の$1の部分はバックスラッシュを入れればドットが文字として認識されるという事ですかね

されますが、それで何をやろうとしているのかは意味不明。

この処理でやろうとしていることは、拡張子を抜いたファイル名の後ろに"_on"を追加したファイル名に置き換えることです。順を追って解釈していきます。

^(.+)
意味：先頭から（＝「^」）、任意の文字が（＝「.」）、1個以上続く（＝「+」）。
どこまでかというと、次の検索条件までですので、次を見ないとわかりませんが、
ここでは先に言っておきます、質問では「gnav_01」にあたります。

(\.[a-zA-Z]+）$
意味：正規表現の記号ではなく、文字としてのドット（＝「\.」）の後ろに任意のアルファベットが（=「[a-zA-Z]」）、1個以上（＝「+」）、末尾まで（＝「$」）続く。
質問では「.png」にあたります。

そして、正規表現でカッコをつけることによって、置換えで「$数字」を使ってその部分を再利用できるようにしています。数字はカッコの順番になります。

"$1_on$2"
意味：1つ目のカッコの中身（＝「$1」）の後ろに「_on」をつけて、その後ろに2つ目のカッコの中身（＝「$2」）をつける。質問では「gnav_01」の後ろに「_on」をつけて、「.png」をつけて、「gnav_01_on.png」の出来上がりです。

ポイント：正規表現での1つ目のドットは任意の文字を意味する記号、2つ目のドットはエスケープ（＝「\」）された文字としてのドットです。

お礼

新年から丁寧な解説本当にありがとうございますm(_ _)m大変詳しく説明して頂いて助かります。これを機にもっと正規表現を詳しく理解して使えるように、頑張りたいと思いますm(_ _)m

回答No.2

SortaNerd

$1（.[ドット])
違います。$1に入っているのは「(.+)」で表される「任意の文字が1個以上任意の個数」です。
$2(.[アルファベッド]）
これは何を言いたいのか分かりません。$2に入っているのは「.(ドット)の後にアルファベットが1個以上任意の個数」です。
質問を見る限り正規表現を全く理解していないようですので、勝手な解釈をせずきちんと正規表現の解説サイトなど見ることをお勧めします。

お礼

明けましておめでとうございます。
新年から返答本当にありがとうございますm(_ _)m
一応サイトを参考にしたのですが、まだままだ勉強不足を感じますT_T最初の$1の部分はバックスラッシュを入れればドットが文字として認識されるという事ですかね( ? _ ? )

回答No.1

notnot

/^(.+)(\.[a-zA-Z]+)$/

ドット \. は2つめの括弧の中なので、$2 に含まれます。$2の先頭がドット。$1 はドットの直前までです。
つまり、ドットの直前に _on が入ります。

お礼

単純に間の中に入るのだと思っていました。
ありがとうございますm(_ _)m