にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

JavaScriptで正規表現を使う方法 [計算・変換]

JavaScriptでも正規表現を使った文字列の検索や置換が可能です。検索文字列が固定されている場合はかなりシンプルな記述で済みます。変数に格納された文字列を検索文字列に使いたい場合は、RegExpコンストラクタ関数を使うことで実現できます。

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つだけが返されます。

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

JavaScriptソース

// チェック
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を使って以下のように記述します。

JavaScriptソース (説明)

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

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

JavaScriptソース (具体例)

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メソッドを使う方が良いでしょうね。

関連記事:

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---