【JavaScript】正規表現オプションの意味と使い方まとめ

JavaScriptの正規表現はいくつか表し方があります。

それは次のように正規表現リテラルを使う方法とRegExpオブジェクトを使う２通り

/** 正規表現リテラルで宣言 */
var regexp = /target/;

/** RegExpオブジェクトとして宣言 */
var regexp = new RegExp('target');

/** 正規表現リテラルで宣言 */

var regexp = /target/;

/** RegExpオブジェクトとして宣言 */

var regexp = new RegExp('target');

この２つの使い方やパフォーマンス的な違いは次でもまとめました。

PisukeCode - Web開発まとめ

JavaScriptで正規表現を表す２つの方法とパフォーマンス的な違い

https://pisuke-code.com/js-ways-to-create-regexp-and-perf

JavaScriptには正規表現パターンを作る方法は２つあります。なんでわざわざ２通りの方法があるかというと用途によって使い分けるためまたどちらを使うかによってもパフォーマンス的な違いが出てきます。そういう訳でJSでの正規表現パターンの作り方とそれぞれのパフォーマンス的な違いについて紹介正規表現を表す２通りの方法JavaScriptで正規表現を顕すには次の２通りの書き方が可能正規表現リテラルを使う RegExpオブジェクトを使うこの２つについてそれぞれコード例何かと一緒に説明したいと思います。正規表現リテラルを使うこ...

それでこれら正規表現にはオプション（フラグ）を付けることもできます。

例えばリテラルの場合は最後のスラッシュ（ / ）の後、RegExpの場合は第２引数にオプションを文字列として渡すことが可能

/** 正規表現リテラルの場合 */
var regexp = /hoge/gm

/** RegExpオブジェクトの場合 */
var regexp = new RegExp('hoge', 'gm');

/** 正規表現リテラルの場合 */

var regexp = /hoge/gm

/** RegExpオブジェクトの場合 */

var regexp = new RegExp('hoge', 'gm');

最後についている g とか m とかの文字がオプション

全てのオプションはこのように１文字で表され、

グローバルサーチ
小文字・大文字の区別
複数行検索

などの高度な検索をするために使われます。

そこでここではJavaScriptの正規表現内で使えるオプションについてまとめてみました。

時々忘れがちになるので自分の記憶の整理も兼ねて紹介します。

このページの目次

正規表現に使える４つのオプション（フラグ）
ちなみにPHPでは・・・
ここまでのまとめ

正規表現に使える４つのオプション（フラグ）

JSの正規表現で利用可能なオプションは次の４つ

gオプション
iオプション
mオプション
uオプション

gオプション

これはグローバルサーチをするために使われるオプション

つまり文字列全体で見つかった全てのパターンにマッチさせるという意味です。

ではまずgオプションを使わないとどうなるか考えてみます。

例えば次は文字列 text に対してreplaceメソッドを使って 'hoge' を 'piyo' に置換しているコード

var regexp = /hoge/;
var text = 'hoge hoge hoge';
var substr = 'piyo'; 

text = text.replace(regexp, substr);
console.log(text);
  /// => piyo hoge hoge

var regexp = /hoge/;

var text = 'hoge hoge hoge';

var substr = 'piyo';

text = text.replace(regexp, substr);

console.log(text);

/// => piyo hoge hoge

この場合、gオプションはついてないので最初の 'hoge' だけ置換されます。

つま置換後のテキストは 'piyo hoge hoge' のようになるということ

gオプションを付けないと、このように一度しか検索・置換されません。

一方で次はgオプションを付けた場合のコード

var regexp = /hoge/g;
var text = 'hoge hoge hoge';
var substr = 'piyo'; 

text = text.replace(regexp, substr);
console.log(text);
  /// => piyo piyo piyo

var regexp = /hoge/g;

var text = 'hoge hoge hoge';

var substr = 'piyo';

text = text.replace(regexp, substr);

console.log(text);

/// => piyo piyo piyo

見てわかるように /hoge/ から /hoge/g と変更してあります。

こうすればパターンが繰り返し置換されるので、置換後テキストは 'piyo piyo piyo' となります。

以上がgオプションの意味と使い方

あるパターンを繰り返し置換したり検索したい場合は必須のオプションです。

iオプション

これ小文字と大文字を区別しないで検索・置換するためのオプション

例えばマッチさせるときに小文字の「a」と大文字の「A」は同じと扱われます。

こちらもiオプションを使わない場合から考えてみましょう。

例えば次は文字列 text 内にある 'hoge' を 'PIYO' に置換しようとしてるコード例

var regexp = /hoge/g;
var text = 'HOGE HOge hoge';
var substr = 'PIYO'; 

text = text.replace(regexp, substr);
console.log(text);
  /// => HOGE HOge PIYO

var regexp = /hoge/g;

var text = 'HOGE HOge hoge';

var substr = 'PIYO';

text = text.replace(regexp, substr);

console.log(text);

/// => HOGE HOge PIYO

当然小文字だけの 'hoge' しか 'PIYO' に置換されません。

なので置換後のテキストは 'HOGE HOge PIYO' となります。

一方で次はiオプションを付けた場合のコード

var regexp = /hoge/ig;
var text = 'HOGE HOge hoge';
var substr = 'PIYO'; 

text = text.replace(regexp, substr);
console.log(text);
  /// => PIYO PIYO PIYO

var regexp = /hoge/ig;

var text = 'HOGE HOge hoge';

var substr = 'PIYO';

text = text.replace(regexp, substr);

console.log(text);

/// => PIYO PIYO PIYO

/hoge/ig のようにgオプションの前にiオプションを付けました。

そうすると置換後のテキストは 'PIYO PIYO PIYO' となります。

このように小文字・大文字関係なしで検索・置換できるのがiオプションのメリットです。

mオプション

これは対象のテキストを複数行として扱うためのオプション

逆に言えばmオプションがないと、どんなテキストでも１行として扱われるという意味です。

これがどんな場面で役立つかというと各行の最初と末尾にマッチさせたい場合

例えばmオプションを付けない場合、行頭を表す ^ と行末を表す $ は文字列全体の最初と最後だけにしかマッチできません。

例えば次のコードを考えてみてください。

var regexp = /^(hoge(|\s+))+$/g;
var text = `
hoge hoge hoge
hoge hoge hoge
hoge hoge hoge
`.trim();
var substr = 'piyo piyo piyo'; 

text = text.replace(regexp, substr);
console.log(text);
  /// => piyo piyo piyo

var regexp = /^(hoge(|\s+))+$/g;

var text = `

hoge hoge hoge

`.trim();

var substr = 'piyo piyo piyo';

text = text.replace(regexp, substr);

console.log(text);

/// => piyo piyo piyo

上のコードではテンプレートリテラルを使って複数行を定義、

１行ごとに行頭から行末までの間を 'piyo piyo piyo' で置き換えしようとしてます。

ですがこの場合だと文字列全部が 'piyo piyo piyo' に置換されてしまいました。

それは ^ と $ が文字列全体の初めと終わりを表してしまうからです。

なので各行ごとにマッチさせるにはmオプションが必要です。

つまり先ほどの例なら次のようにする必要があるということ

var regexp = /^(hoge(|\s+))+$/mg;

1	var regexp = /^(hoge(\|\s+))+$/mg;

こうすれば ^ と $ は各行の最初と最後にマッチしてくれるようになります。

uオプション

正規表現内でユニコード値を表したい場合に必要なオプション

ユニコード値については次ページを見ると分かりやすいです。

www.shurey.com

Unicode一覧表

http://www.shurey.com/js/works/unicode.html

例えばユニコード値が16進数で 308F なら正規表現だと \u{308F} で表せます。

基本的にはあまり使うことがないオプションですね。

以下uオプションの使用コード例

var regexp = /\u{3042}/gu;
var text = 'あああ';
var substr = '亜';

text = text.replace(regexp, substr);
console.log(text);
  /// => 亜亜亜

var regexp = /\u{3042}/gu;

var text = 'あああ';

var substr = '亜';

text = text.replace(regexp, substr);

console.log(text);

/// => 亜亜亜

「あ」のユニコード値は 3042 なので正規表現だと \{3042} で表せます。

こういう風にユニコードでパターン指定したい場合などに使うみたいです。

ちなみにPHPでは・・・

以上４つがJavaScriptで使える正規表現オプション

ちなみにPHPでも同じようなオプションが存在します。

PHPで使える主なオプションは次の６つ

iオプション
mオプション
sオプション
xオプション
Aオプション
Uオプション

詳しくは次記事でまとめました。

PisukeCode - Web開発まとめ

【PHP】正規表現で使えるオプション（パターン修飾子）まとめ

https://pisuke-code.com/php-regexp-options

PHPでは正規表現を文字列として定義します。例えば次が正規表現パターンの例'/\w+apple/'このような文字列を検索や置換系の関数に渡すことで正規表現として機能します。参考記事 : PHPでの正規表現の表現方法や使い方まとめそしてこの正規表現ではオプション（パターン修飾子）も使用可能です。例えば次は iオプションと mオプションを付けた正規表現の例'/\w+apple/im'上のように最後の / の後にオプションを表す１文字を並べます。ここではPHP正規表現で使えるオプションについて記憶の整理も兼ねてま...

PHPとJavaScriptでは使えるオプションがかなり違います。

ここまでのまとめ

ということ各オプションをもう一度まとめ

gオプション
文字列全てで繰り返しパターンをマッチさせる。いわゆるグローバルサーチ
iオプション
小文字や大文字の区別をせずにパターンをマッチさせる
mオプション
文字列が複数行の場合、 ^ と $ を各行の最初と最後にマッチさせる
uオプション
ユニコード値で文字をマッチさせる。あまり使わないオプション

gオプションやiオプションはよく使うことが多いと思います。

以上JavaScript正規表現で使えるオプションについてまとめました。

【JavaScript】正規表現オプションの意味と使い方まとめ

正規表現に使える４つのオプション（フラグ）

gオプション

iオプション

mオプション

uオプション

ちなみにPHPでは・・・

ここまでのまとめ

関連記事

プロフィール

人気記事

検索してみる