フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)正規表現を使う際に知っておきたいこと

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

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

1.パターンの指定

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

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

// RegExpコンストラクタ
var regObj = new RegExp('[0-9]+');
2.エスケープ記号

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

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

var regObj = new RegExp('[\\s\\w]+');
3.フラグの指定

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

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

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

Javascript正規表現

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

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

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

// ---- matchの戻り値 ----
// ["bbbcccddd", "bbb", "ccc", "ddd", index: 3, input: "aaabbbcccdddeee"]
replaceでのキャプチャ取得方法1

文字列に特定の文字を付加したいケースなどではキャプチャを使用しますが、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でのキャプチャ取得方法2

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;
// ;