JavaScriptで正規表現を使う方法

JavaScriptでも正規表現を使った文字列の検索や置換が可能です。
検索する文字列が固定されていてスクリプト内部に書いてしまえる場合には、かなり簡単に記述できます。

※下記の文章やサンプルソース内には、「\」という記号が何度も出てきます。ご覧の環境によって、この文字は「バックスラッシュ」に見えたり「円記号」に見えたりします。これは表示フォントによって差があるだけで、同じ文字です。キーボードの[￥]キーで入力できます。

正規表現の記述方法(検索文字列が固定の場合)

変数TargetStringに格納されている文字列に対して、何らかの文字列を検索したい場合は、以下のように記述します。

TargetString.match( 正規表現 );

文字列を格納した変数のmatchメソッドに正規表現をそのまま渡せば良いだけです。
マッチした場合は、マッチした文字列が配列に格納されて返されます。1つもマッチしなければ、nullが返されます。
例えば以下のような感じで記述して使えます。

var res = TargetString.match( /\d+/g );

上記だと、変数TargetStringの中に1文字以上の連続する数字が存在する場合は、変数resの中に配列の形で得られます。1つも存在しない場合は変数resにはnullが入ります。
※「\d」は任意の数字にマッチし、「+」は1回以上の繰り返しを表すため、「\d+」は1文字以上の連続する数字にマッチする正規表現です。正規表現の最後にグローバル修飾子「g」を記述しているので、指定した正規表現にマッチするすべての文字列を返します。グローバル修飾子がなければ、最初にマッチした1つだけが返されます。

以下のように書けば、対象文字列中に含まれる数値だけをすべて抜き出して配列に格納し、その中身をアラートボックスで表示します。

// チェック
var res = TargetString.match( /\d+/g );
// 結果表示
if( res ) {
   var ShowRes = "数値は " + res.length + "件見つかりました。\n\n";
   for( i=0 ; i<res.length ; i++ ) {
      ShowRes += (i+1) + "つ目： " + res[i] + "\n";
   }
   alert( ShowRes );
}
else {
   alert( "1つも見つかりませんでした。" );
}

変数resには、マッチした文字列の配列か、もしくはnullが格納されます。resの中身がnullではない場合は、res.length で格納個数が分かります。また、res[添字] で任意番目のマッチ文字列が得られます。

上記のサンプルでは、ボタンをクリックすると3つの数字列が抜き出されます。(入力欄の内容を自由に書き換えて試せます。)

正規表現の記述方法(検索文字列が変数に格納されている場合)

先ほどの例では検索文字列(正規表現)をソース中に直接記述しました。それに対して、変数に格納されている文字列(正規表現)を使って検索したい場合は、先ほどの記述方法は使えません。
その場合は、コンストラクタ関数RegExpを使って以下のように記述します。

var SearchString = "検索文字列(正規表現)";
var RegularExp = new RegExp( SearchString, "修飾子" );
var res = TargetString.match( RegularExp );

SearchString変数が「検索する文字列(正規表現)」。TargetString変数が「検索対象の文字列」です。
先ほどと同様に、数字列を抜き出すなら以下のように書けば良いでしょう。

var SearchString = "\d+";
var RegularExp = new RegExp( SearchString, "g" );
var res = TargetString.match( RegularExp );

変数resに格納される内容は、先ほどと同様です。(マッチ文字列の配列か、もしくはnullです。)

上記では、正規表現の入力欄に「\d+」と記述しているので先ほどと同じ結果になりますが、例えば「\W+」(※大文字)などに書き換えると異なる結果が出てきます。
「\W」はアルファベット・数字・アンダースコア以外の文字にマッチします。(※小文字の「\w」だと、アルファベット・数字・アンダースコアにマッチします。)

indexOfメソッドより楽？

JavaScriptでの文字列の検索は、正規表現を使わなくてもindexOfメソッドを使うこともできます。
しかし、indexOfメソッドが返すのは、検索文字列の存在する位置(3文字目にあるなら2が返されます)なので、マッチする文字列を一気に得たい場合には正規表現の方が楽でしょう。
とはいえ、単純に「指定文字列が含まれているかどうか」だけをチェックしたい場合には、indexOfメソッドを使う方が高速なようです。
文字の種類などで判別したいわけではなく、単に特定の文字列があるかどうかだけが分かれば充分なのであれば、indexOfメソッドを使う方が良いでしょうね。

関連記事：

• 正規表現を使って文字列を置換する方法
• HTMLタグ関連記号を、文字実体参照に変換する
• カタカナをひらがなに一括変換する
• 入力された文字列に含まれる空白文字を削除する
• タブや全角スペースと半角スペースを相互変換する方法
• すべての行頭・行末に任意の文字列を追加する方法

(更新日：2017年06月12日)