Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:48.

JavaScriptで正規表現を使う

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

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

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

TargetString.match( 正規表現 );

文字列を格納した変数のmatchメソッドに正規表現をそのまま渡せば良いだけです。 マッチした場合は、マッチした文字列が配列に格納されて返されます。1つもマッチしなければ、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メソッドより楽?

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

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど