【JavaScript】正規表現の使用方法

JavaScript で正規表現を使用する方法についてまとめました。

RegExpオブジェクトと正規表現リテラル

JavaScript での正規表現は RegExp オブジェクトを使用しますがオブジェクトの生成は RegExp オブジェクトのコンストラクタ関数か、正規表現リテラルを使用する2つの方法があります。

// コンストラクタ関数
var reg = new RegExp("hoge");
// 正規表現リテラル
var reg = /hoge/;

正規表現リテラルはスクリプトのロード時にその正規表現をコンパイルするため、正規表現が変わることがない場合はパフォーマンスが良いです。

コンストラクタ関数は実行時にその正規表現をコンパイルします。正規表現パターンが変わる、又は、あらかじめパターンがわからない場合はコンストラクタ関数を使用してください。

オプション

正規表現にはオプションフラグがあり、単独で使用することも復数まとめて使用することもできます。以下のような値が指定可能です。

オプション	機能
g	グローバルサーチ。文字列全体に対してマッチングするか（無指定の場合は1度マッチングした時点で処理を終了）
i	大文字／小文字を区別しない（無指定の場合は区別する）
m	複数行の入力文字列を複数行として扱う（`^`及び`$`が各行の先頭末尾にマッチする）

正規表現にオプションを含める場合は次のように指定します。

// コンストラクタ関数
var reg = new RegExp("hoge", "gi");
// 正規表現リテラル
var reg = /hoge/m;

エスケープ

コンストラクタ関数を使用する場合は、文字列内に特殊文字のバックスラッシュ文字が存在すると、自身もエスケープ文字となるためエスケープを追加する必要があります。以下 2 つの構文は同等です:

var reg = /\d+/;
var reg = new RegExp('\\d+');

正規表現リテラルでは、正規表現全体をスラッシュ/で括ります。スラッシュ自体は特殊文字ではないので通常エスケープは必要ありませんが、正規表現リテラルの中で使用する場合に関しては、エスケープする必要があります。

// /fuga/にマッチする
var reg = /\/fuga\//;
var reg = new RegExp('/fuga/');

正規表現メソッド

オブジェクト	メソッド	戻り値	機能
RegExp	exec	Array or null	文字列中で一致するものを検索する RegExp のメソッド。結果情報の配列を返します。
RegExp	test	boolean	文字列中で一致するものがあるかをテストします。
String	match	Array or null	文字列中で一致するものを検索する String のメソッド。結果情報の配列を返します。
String	search	integer	文字列中で一致するものがあるかをテストする String のメソッド。マッチした場所のインデックスを返します。検索に失敗した場合は -1 を返します。
String	replace	String	文字列中で一致するものを検索し、マッチした部分文字列を別の部分文字列に置換します。
String	split	Array	正規表現または固定文字列を用いて文字列を分割します。

execメソッド

正規表現のマッチが成功した場合、execメソッドは配列を返します。配列のインデックス 0 には最後にマッチした文字が、インデックス 1 以降には括弧で囲まれた部分文字列のマッチがセットされます。マッチに失敗した場合execメソッドは null を返します。

var result = /cde/.exec("abcdefg");
console.log(result);  // ["cde", index: 2, input: "abcdefg"]
console.log(result[0]);  // cde

var result = /(.+)cde(f)/.exec("abcdefg");
console.log(result);  // ["abcdef", "ab", "f", index: 0, input: "abcdef"]
console.log(result[1]);  // ab
console.log(result[2]);  // f

var result = /xyz/.exec("abcdefg");
console.log(result);  // null

testメソッド

マッチするかどうかを調べるだけであればexecメソッドよりtestメソッドを使用します。結果は真偽値 ( true / false ) を返します。

var result = /cde/.test("abcdefg");
console.log(result);  // true
var result = /xyz/.test("abcdefg");
console.log(result);  // false

matchメソッド

RegExp.prototype.execメソッドと基本的には同じです。正規表現がgオプションを含んでる場合のみ、マッチする全てを含む配列を返します。

var result = "ABCDEFGabcdefg".match(/[a-c]/gi);
console.log(result);  // ["A", "B", "C", "a", "b", "c"]

searchメソッド

RegExp.prototype.testメソッドと基本的には同じです。

var result = "abcdefg".search(/cde/);
console.log(result);  // 2
var result = "abcdefg".search(/xyz/);
console.log(result);  // -1

replaceメソッド

マッチした部分文字列を別の文字列に置換します。構文は以下の通りで、第1引数には正規表現オブジェクト、又は文字列、第2引数には置換後の文字列を指定します。戻り値は置換後の文字列であり、元の文字列は変更されません。マッチしなかった場合は元の文字列のまま返ってきます。

var result = str.replace(pattern, replacement)

マッチするパターンは部分マッチでいいので置換したい文字のみを指定することができます。以下はURLのクエリパラメータにマッチさせて削除しています。

var url = "http://hoge.com/1234?utm=abcdefg";
var result = url.replace(/[?#].*/, "");
console.log(result);  // http://hoge.com/1234

置換後の文字列には$1~$9といった特殊変数を使用することもできます。サブマッチの文字列を保存するための変数であり、正規表現で丸括弧で囲んだ文字列が順番にセットされます。

var url = "http://hoge.com/1234?utm=abcdefg";
var result = url.replace(new RegExp("(http://hoge.com/\\d+)([?#].*)"), "url=$1, query=$2");
console.log(result);  // url=http://hoge.com/1234, query=?utm=abcdefg

splitメソッド

split メソッドはセパレータに正規表現を指定することができます。ただ、普通に,とか文字列を指定することの方が多そうです。

var reg = new RegExp("[/.-]");
var result = "2016/06/15".split(reg);
console.log(result);  // ["2016", "06", "15"]
var result = "2016.07.15".split(reg);
console.log(result);  // ["2016", "07", "15"]
var result = "2016-08-15".split(reg);
console.log(result);  // ["2016", "08", "15"]