正規表現とは
正規表現(regular expression)とは文字パターンを表現する方法です。
つまり、文章の中のある文字列を検索したいときなど役に立ちます。
今回はJavaScript(jQuery)で正規表現を活用する説明です。
まずは正規表現で比較する文字を「/」で囲みます。
例
/JavaScript/
これは「JavaScript」という文字列にマッチします。
以下の例はjQueryを利用した単語の入れ替えを行うコードです。ボタンをクリックしたらp要素の中の「JavaScript」が「Java」に変わります。正規表現はreplace()の引数として活用します。
正規表現を利用したreplace()の使用方法は以下のとおりです。
replace(/正規表現の記述/,”変換したい文字列”)
スクリプトコード
$(function(){ $("button").click(function(){ $("p").text($("p").text().replace(/JavaScript/,"Java")); }); });
HTMLコード
<p>JavaScriptはJavaではありません。</p> <p><button>click</button></p>
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
と変換できます。