解 説

正規表現とは

正規表現(regular expression)とは文字パターンを表現する方法です。
つまり、文章の中のある文字列を検索したいときなど役に立ちます。

今回はJavaScript(jQuery)で正規表現を活用する説明です。

まずは正規表現で比較する文字を「/」で囲みます。

 /JavaScript/
これは「JavaScript」という文字列にマッチします。

以下の例はjQueryを利用した単語の入れ替えを行うコードです。ボタンをクリックしたらp要素の中の「JavaScript」が「Java」に変わります。正規表現はreplace()の引数として活用します。
正規表現を利用したreplace()の使用方法は以下のとおりです。

replace(/正規表現の記述/,”変換したい文字列”)

スクリプトコード

HTMLコード

replace()に正規表現を活用したサンプル
*このサンプルはコードを変更して試すことができます。左上がHTML記述欄、右上がスクリプト記述欄、右下が実行画面です。下記内容を参考に変更して正規表現を色々試してください。ただし、保存はできません。

正規表現で使用されるメタ文字

正規表現で使用される特別な意味を持つ特殊文字(メタ文字)には以下のものがあります。

^ $ . + * = ! : | \ / ( ) { }

行の先頭と最後

行の先頭は ^ (キャレット)で表します。
行の最後は $ で表します。
.(ドット) ある1文字を表します。

^ 小さな山が先頭で $バックスが終わりと覚えましょう。(greenbacksから来ているとか・・)

/script$/

文字列の最後(単語の最後ではなく、文の最後)に$を付けると最後がscriptで終わる文字列にマッチします。

/^Java/
文字列の最初に^を付けると先頭がJavaで始まる文字列にマッチします。

/^JavaScript$/
この場合は「JavaScript」の文字列だけがマッチします。

/J.va/
この場合は「Java」でも「Jova」「Jeva」でも2文字目は何でもOKです。

同じ文字の繰り返し

+ * ?は繰り返しを表します。

* 直前の項目を0回以上繰り返します。

AB*C → AC,ABC,ABBC,ABBBC,….

+ 直前の項目を1回以上繰り返します。

AB+C → ABC,ABBC,ABBBC,ABBBBC,….

? 直前の文字が無いか、1つだけある。

AB?C → AC,ABC
実際は Apples? Apples,Appleのように単数形と複数形にマッチさせたい場合に使用。

.* 直前の任意の文字を繰り返します。それはどんな文字でも連続する文字全てとなります。

複数の文字列の指定

| は「または」の意味を持ちます。

[] 「クラス」とか「文字セット」といいます。[]の中に書かれた任意の1文字にマッチします。
[abc]の場合abcのどれかにマッチした場合

グループ化

グループ化は()を使用します。
(ABC)+
という6文字は、 ABC ABCABC ABCABCABC などにマッチします。

replace関数での正規表現活用方法

replace関数では第一引数に正規表現を利用したワードを使用することができます。第二引数が置換したいワードを入れます。第一引数で正規表現のグループ化した部分がある場合、第二引数でグループ化下部分を「$数字」で表すことが出来ます。 グループ化が二つあれば、$1、$2、と増えていくだけで表すことができます。

正規化使用例

/^(.+)(\.[a-z]+)$/
images/mypicture.jpgなどとマッチします。
replace(/^(.+)(\.[a-z]+)$/, “$1_on$2”)
とすると
images/mypicture_on.jpg
と変換できます。

sample