Javascript での正規表現の記述方法

最終更新:2018-11-24 by Joe

Javascript での正規表現の記述方法についてまとめました。

【はじめに】 Javascript で「正規表現オブジェクト」を宣言する

まずは、基本知識からです。Javascriptでは正規表現はオブジェクトの型の一つとして定義されています。これは、コンストラクタ関数「RegExp」で定義されています。

正規表現「RegExp」オブジェクトを生成しよう

さて、試しに、RegExp オブジェクトを生成してみましょう。

Javascriptで正規表現オブジェクトの生成方法は2種類あります。もっとも典型的な方法は、(1)コンストラクタ関数 RegExp()を用いるオブジェクトの生成です。もしくは、Javascript においては、(2)「/(スラッシュ)」を使って正規表現を囲む「リテラル表現」を用いると、よりシンプルに正規表現オブジェクトを生成できます。

// その1)コンストラクタ関数を利用
var re = new RegExp('https?://example\.com');


// その2)リテラル表現を利用
var re = /https?:\/\/example\.com/;

なお、(2)のリテラル表現では、スラッシュ以外はデリミタとして認められませんので注意して下さい。デリミタとしてのスラッシュを使っていますので、上記のように正規表現ではスラッシュをエスケープする必要が生じます。

逆に(1)では、スラッシュをエスケープする必要はありません。

どちらを使うべき?

実際どちらでも良いのですが、もし大きな違いがあるとすれば、Javascript においては、正規表現でURL文字列を扱う事も多いのではないでしょうか?そのような場合、RegExpコンストラクタ関数を使えば、URLに頻出するスラッシュをエスケープしなくて済みますので、正規表現パターンを読みやすく記述できるでしょう。もしスラッシュを含まない正規表現であれば、リテラル表現を使ったほうがシンプルに記述できるのは言うまでもありません。もちろん、最終的にはお好みです。

正規表現の文字列内にスラッシュがあるときだけ、new RegExp() を使おうかな〜。

Javascript の正規表現マッチングできる関数

さて、正規表現オブジェクトを生成したら、実際のマッチング処理の方法です。

正規表現を使ったマッチングを行うには、(A)RegExpオブジェクトで利用可能な正規表現関連のメソッドを利用するか、もしくは、(B)Stringオブジェクトも正規表現マッチングを実行するための関数が実装されています。

2つはよく似た機能を提供しますので、違いに気をつけつつ、お好みの関数を使って下さい。

ARegExp オブジェクトの関数

メソッド説明
.exec()文字列中で一致するものを検索する。結果情報の配列を返す
.test()文字列中で一致するものがあるかをテストする。true または false を返す

BString オブジェクトの関数

メソッド説明
.match()文字列中で一致するものを検索する。結果情報の配列を返します。マッチしない場合は null を返す
.search()文字列中で一致するものがあるかをテストする。マッチした場所のインデックスを返します。検索に失敗した場合は -1 を返す。
.replace()文字列中で一致するものを検索し、マッチした部分文字列を別の部分文字列に置換する。
.split()正規表現または固定文字列を用いて文字列を分割し、部分文字列の配列に入れる。

Javascript における正規表現のマッチング例

それでは、マッチングの処理を、目的別に見ていきます

Case 1正規表現でマッチした文字列を取得したい

マッチングを成否を確認するには、RegExpオブジェクトの.exec()メソッドか、Stringオブジェクトの.match()を使います。

RegExp.exec()

正規表現オブジェクトの関数、exec() は幾分詳しい情報を配列で返します。また、オブジェクトの状態を更新します。

var pattern = /(ja)va/;

// 結果情報の配列を返す。見つからなければnull
var result = pattern.exec('javascript');

// 最後のマッチング文字列。見つからなければNULL。
console.log ( result[0] ); // java

// 括弧で囲まれたサブパターンのマッチング(1, 2, 3.. の上限なし)
console.log ( result[1] ); // ja

// input文字列
console.log ( result['input'] ); // javascript

String.match()

文字列オブジェクトの関数、.test() メソッドはもう少しシンプルです。サブパターンのマッチングも参照できません。

var subject = 'javascript';

// 結果情報の配列を返す。見つからなければnull
var result = subject.match('/java/'); 

console.log(result); // java

目的に応じて使い分けられるでしょう。

Case 2正規表現へのマッチが見つかるかどうかチェックして、真偽を知りたい。

単にマッチするかどうかを知りたい時は、RegExpの.test() メソッドか。Stringの.search() が利用できます。

RegExp.test()

RegExpの.test() を使うと・・・、

var pattern = /(ja)va/;

// true/false を返す。
var result = pattern.test('javascript');

console.log(result);  // true

String.search()

Stringの.search() を使うと・・・、返り値の種類が少し異なります。

var subject = 'javascript';

// マッチングの位置を整数で返す。見つからない時は-1
var result = subject.search('/java/');
console.log(result); // 0

それぞれ、似てるけど動作が異なり少し紛らわしいですね。

Case 3マッチ文字列を置換したい

マッチングを置換するには、Stringのreplaceを使います。戻り値として新しい文字列オブジェクトが返されます。(もとの文字列は変更されません)

String.replace()

var subject = 'Javascript is flexible.';

// 単純な置換。iは大文字小文字を無視するオプション。
var result = subject.replace('/java/i', 'Action' ); 
console.log(result); // Actionscript is flexible.


// カッコ内のサブパターンを後方参照
var result = subject.replace('/(Java).*(easy)/', '$1 is not so $2.' );
console.log(result); // Java is not so flexible.

// グローバルな置換。最初の置換で処理が止まらず、何度でも置換する
var result = subject.replace('/o/g', 'O' );
console.log(result); // Java is nOt sO flexible.

RegExpを使って置換もできますが、上記 String 関数は幾分シンプルに記載できるでしょう。

「リテラル」とは

初学者にとって、「リテラル(Literal)」とはあまり聞き慣れない言葉かもしれません。リテラルとして表記できる型はプログラミング言語によりますが、例えば、Javascriptにおいて、下記はすべてリテラルによるオブジェクトの生成です。

var num = 1;               // Integer型のリテラル表現
var str = 'javascript';    // String型のリテラル表現
var str = [1, 2, 3];       // Array型のリテラル表現
var re = /javascript/;     // RegExp型のリテラル表現

参考:Wikiペディア:リテラル

参考リンク

基本的な正規表現に関しては、こちらもご一読下さい。

また、正規表現のメタ文字に関しては、こちらにまとめています。

MDNのドキュメントです。詳しく記載されています。