Web Developers Antenna 〜ウェブ開発者アンテナ〜 [W'ANEB]

Web Developers Antennaでは、開発ノウハウ、便利ツール、Web運用に関する情報を蓄積していきます。

*

JavaScriptでの正規表現

      2015/08/25

スポンサードリンク

JavaScriptでの正規表現について

正規表現は、覚えてしまうととても便利に使えます。正規表現を覚えることで、文字列操作の幅が広がり、開発手法にも違いが出てきます。

正規表現とは?

まず、正規表現とは何?というところを解説していきます。
正規表現とは、簡単にいえば文字列がある条件に当てはまるかどうか、あるいは文字列のどの部分が当てはまるかということを調べるものです。

基本的なところで正規表現を使うところとしては、文字列検索に利用でき、正規表現を使うと、複雑な検索条件を指定することができるようになります。

正規表現での検索条件の書き方

複雑な検索条件が書けると書きましたが、どのような書き方があるか例示していきます。

[例1-1]

xyz

正規表現のもっとも簡単な型です。単純に「xyz」とあるだけで、この正規表現は「”xyz”に該当」という条件になります。

[例1-2]

x.z

[例1-1]の「y」を「.」にしてみます。
同じように”x.z”という文字列に該当という条件かと思いやすいですが違います。ここで利用する”.”(ピリオド)は特別な意味を持つ文字になります。

どのような意味を持つかというと、どの文字でも該当するというものです。”.”の部分に当てはまる文字は、何でもよいのです(改行(LF)はこれに当てはまらない)。

つまり、「xrz」も「xyz」も、「xうz」「a$c」なども条件に該当(マッチ)することになります。

[例1-3]

xy+z

次は記号”+”が出てきました。これも特別な記号です。
“+”記号の意味は、直前の文字が1つ以上繰り返している場合に該当します。
直前の文字は、今回の場合は”y”です。
1つ以上ということは、数を限らないで、1つ以上なら幾つでもいいということ(1つしかなくても「繰り返している」ことにします)です。

つまり、この条件は、「xyz」に該当(マッチ)するほか、「xyyz」「xyyyyz」「xyyyyyz」「xyyyyyyyz」などの条件に該当(マッチ)します。

[例1-4]

xy*z

[例1-3]に相似しているもので”*”というものがあります。
“+”が”*”に変わりました。この記号は、1つ以上ではなく「0個以上」を表現します。つまり、直前の文字が0個でもいいのです。
ですので、この正規表現は、”+”の場合に加えて、”y”が1個もない形である「xz」にも条件が該当(マッチ)します。

[例1-5]

x.+z

前述で紹介した[例1-2]と[例1-4]の2つを組み合わせた型もあります。

“+”の直前の文字は”.”です。この”.”は、どんな文字でも当てはまるものでした。それが、”+”によって何個でも良くなったということは、この正規表現は、xとzの間にどんな文字がどれだけ入っていてもいいということになります。

“+”は「1つ以上」なので、まったく何も入っていない「xz」という形は該当(マッチ)しません。しかし、それ以外なら、「xyz」も「x3333z」も「xあかさたなz」「xabcdefz」でも、xとzの間に何かが入っている形であればなんでも該当(マッチ)します。もちろん、x.*zならば「xz」にも該当(マッチ)します。

[例2-1]

x[abcde]z

これは[ 〜 ]までで、一塊として扱います。

意味は、「中に含まれている文字のうちの何れか」ということになります。
中に含まれている文字とは、「abcde」の部分です。

つまり、「aまたはbまたはcまたはdまたはe」ということになるから、この正規表現は、「xaz」「xbz」「xcz」「xdz」「xez」のいずれかにマッチします。

[例2-2]

x[a-e]z

[例2-1]の省略型で、aからeの連続するアルファベットの場合、このように省略することができます。
aとeの間のハイフンのおかげで、「a-e」が「aからe」という意味になります。これを利用し、[a-z]とした場合は「aからz」として小文字のアルファベット全てにマッチさせることができます。
また、この組は複数書くことができるから、[a-zA-Z]のような書き方もでき、この場合は「aからzとAからZ」という意味になり、大文字小文字のアルファベット全てになります。

[例2-3]

x[^abcde]z
x[^a-zA-Z]z

[例2-2]と意味を変えて、中の先頭に^をつけると意味が否定に変わり、「その中の文字以外の文字の何れか」ということになります。

 

それでは実際にJavaScriptで開発する場合の正規表現(Regular Expression)を解説します。

RegExpオブジェクト(正規表現オブジェクト)とは?
JavaScriptでは、正規表現はオブジェクトの型で表現します。それがRegExpオブジェクト(正規表現オブジェクト)です。
RegExpオブジェクトの書き方は、/(スラッシュ) で正規表現文字列を囲みます。

/正規表現文字列/

「正規表現文字列」の部分は、「xy+z」とか「x[a-c]z」などの条件部分です。

“(ダブルコーテーション)で囲むと文字列になりますが、/(スラッシュ)で囲むことでRegExpオブジェクトを表現します。

類似しているものとして、

[ ? ]で配列を作成
{ ? }で普通のオブジェクトを作成

 

文字列に該当(マッチ)させるには?

ある文字列に正規表現が該当(マッチ)するか調べるには、次のようにします。

RegExpオブジェクトの持つexecメソッドを用います。
RegExpオブジェクト.RegExp(文字列)

このexecメソッドの戻り値は真偽値で、該当(マッチ)すればtrue、該当(マッチ)しなければfalseを返します。
また、文字列を正規表現に該当(マッチ)させる場合、文字列のどこか一部分が条件を満たしていれば該当(マッチ)します。

[例3-1]

if( /abc/.exec(“xabcz”) ){
console.log(“abcの該当あり”);
}else{
console.log(“abcの該当なし”);
}

文字列”abcdefg”が、正規表現/abc/に該当(マッチ)するかどうか判定しています。
この例では該当(マッチ)しているので、trueが返り、if文の中が実行されて、「abcの該当あり」がFirefoxやchromeのコンソールで表示され、文字列xabcz の中の abc が該当(マッチ)したことになります。

おわりに

などなど、正規表現は、まだまだ色々とありますが、よく使うものを随時更新して紹介していきたいと思います。
ここにないものは、お力になれずすみませんが、各々調べてみてください。

 

 - JavaScript, Web Development ,