（Javascript）正規表現を使う際に知っておきたいこと - フロントサイドエンジニアという選択肢

Javascriptの正規表現は通常の正規表現と、RegExp コンストラクタを使用した正規表現があります。どちらも最終的にはRegExpオブジェクトが生成されますが、両者の使い方が微妙に違い、その辺をきちんと把握していないと思った通りに機能しない場合などあるので、気がついた部分をメモしておきます。

正規表現パターンとRegExp コンストラクタの違い

１．パターンの指定

正規表現パターンでは文字列ではなくスラッシュで囲んで指定しますが、RegExp コンストラクタでは文字列で指定します。

// 正規表現パターン
var regs = /[0-9]+/;

// RegExpコンストラクタ
var regObj = new RegExp('[0-9]+');

２．エスケープ記号

「\w」や「\.」などで使用するエスケープ記号ですが、RegExp コンストラクタでは「\\w」「\\.」と、バックスラッシュ2個で指定します。ただし、バックスラッシュの数を間違えても大体の場合はエラーにならず、ただ機能しないだけなので、この事を知らないとはまってしまいます。

// 正規表現パターン
var regs = /[\s\w]+/;
// RegExpコンストラクタ

var regObj = new RegExp('[\\s\\w]+');

３．フラグの指定

「i」、「g」、「m」などのフラグも指定方法が違います。RegExpオブジェクトは、文字列として第二引数に渡します。

// 正規表現パターン
var regs = /petern/g;

// RegExpコンストラクタ
var regObj = new RegExp('petern','g');

Javascriptの正規表現

matchでのキャプチャ取得方法

string.mutchメソッドで検索をかけると、戻り値として配列が渡されます。配列の最初には検索で取得した文字列、２つ目以降にキャプチャで取得した文字が入ります

var text = 'aaabbbcccdddeee';
var match = text.match(/(b+)(c+)(d+)/);

// ---- matchの戻り値 ----
// ["bbbcccddd", "bbb", "ccc", "ddd", index: 3, input: "aaabbbcccdddeee"]

replaceでのキャプチャ取得方法１

文字列に特定の文字を付加したいケースなどではキャプチャを使用しますが、replaceでキャプチャを使用した場合は、$nでキャプチャした文字を取得します。nには取得した順番に$1,$2,$3...とインデックスが割り当てられます。

var text = 'var variableName;';
var regs = new RegExp('(var)\\s([\\w]+)');
var ret = text.replace(regs,'変数（$1）:$2');

// 結果：変数（var）:variableName;

replaceでのキャプチャ取得方法２

replaceの際に複雑な処理を行いたい場合は、第二引数にコールバック関数を渡すことができます。その中でキャプチャした文字を使用したい場合はargumentsプロパティを使用します。

var text = 'var variableName;';
var regs = new RegExp('(var)\\s([\\w]+)');
var ret = text.replace(regs, function(){
    var returnText = '';
    // Javascriptの標準機能として、
    // functionに与えられた引数は全てargumentsプロパティに収められる
    for(var i in arguments){
        returnText += i + ' : ' + arguments[i] + '\n';
    };
    return returnText;
});
console.log(ret);

// ---- 結果 ----
// 0 : var variableName
// 1 : var
// 2 : variableName
// 3 : 0
// 4 : var variableName;
// ;

正規表現パターンとRegExpコンストラクタの違い