Javascriptで使われている正規表現のフラグについて調べました。
JavascriptのRegExp()メソッドやmatch()メソッドを使って確認していきたいと思います。
正規表現フラグについて
フラグに使う記号を以下にまとめました。
| 記号 | 意味 |
|---|---|
| g | 全ての一致を探す。最初に一致した後も止まることなくすべての一致を探す。 |
| i | 大文字・小文字を区別しない。 「u」フラグが有効の場合、 Unicode による大文字・小文字の扱いを行います。 |
| m | 複数行に渡る一致。先頭および終端を示す文字 (^ や $) が、複数の行で機能します（すなわち、入力文字列全体の先頭および終端だけでなく各々の行 (\n や \r で区切られる) の先頭および末尾にマッチします）。 |
| s | ドットオール(dotall)。「.」が改行文字(\n)に一致します。 |
| u | Unicode。パターンを Unicode コードポイントの羅列として扱います (Binary 文字列も参照)。 |
| y | 先頭固定(sticky)。対象文字列中の正規表現のlastIndex プロパティによって示された位置からのみマッチするようになります (それより後の位置からのマッチは試みません)。 簡単に言えば調べる位置を指定したい時にyフラグを使います。 |
メソッドでフラグを確認しよう
理解を深めるためにRegExp()メソッドやmatch()メソッドを使ってフラグの動きを確認してみます。
RegExp()メソッドの構文
matchはさほど難しくないので、RegExp()の構文を参考までに書いておきます。
new RegExp( パターン, フラグ );
以下のフラグのサンプルコードをabout:blankやJSBinなどを使って動かしながら確認してみるとよりわかりやすいかと思います。
g フラグ
対象の中身全てから一致する箇所を抽出します。
// hahaと数字1文字にgフラグをつけパターンを作成
let reg = new RegExp( /haha\d/,’g’ );
// 適当に作った文字をstrに代入
let str = “hehe1haha2Hehe3Haha4hahe5hehe6haha7heha8HAHA9”;
//strの中からhahaと数字1文字の組み合わせを探しresultに代入
let result = str.match( reg );
//コンソールにresultの中身を表示
console.log(result); // [“haha2”, “haha7”]
もしgフラグがなかったら「haha2」がresultの結果となります。
i フラグ
大文字・小文字を区別せずに一致する箇所を抽出します。
// hahaと数字1文字にgフラグとiフラグをつけパターンを作成
let reg = new RegExp( /haha\d/,’ig’ );
// 適当に作った文字をstrに代入
let str = “hehe1haha2Hehe3Haha4hahe5hehe6haha7heha8HAHA9”;
//strの中からhahaと数字1文字の組み合わせを大文字小文字区別せず探しresultに代入
let result = str.match( reg );
//画面にresultの中身をh1タグで囲い表示
document.write( “<h1>”+result+”</h1>” ); // haha2,Haha4,haha7,HAHA9
m フラグ
mフラグは複数行あるときに有効です。
以下の方法だと、gフラグだけとなんら変化がありませんが「 ^ 」 と「 $ 」を説明する前にgmだけのパターンのサンプルを書いておきます。
// 適当に作った改行を含む文字をmstrに代入
let mstr = `123改行した45、
文字から探せる67
8mフラグ90`;
//数字にgフラグとmフラグをつけパターンを作成
let mreg = new RegExp( /\d/,’gm’ );
//mstrの中から数字1を全て探しmresultに代入
let mresult = mstr.match( mreg );
//コンソールにmresultの中身を表示
console.log(mresult); // [“1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “0”]
ちなみにmフラグだけだと1だけ抽出されます。
m フラグに「 ^ 」
「 ^ 」は行頭をあらわします。mフラグと併用することで各行の行頭に一致する項目をさがします。
// 適当に作った改行を含む文字をmstrに代入
let mstr = `123改行した45、
文字から探せる67
8mフラグ90`;
//^数字にgフラグとmフラグをつけパターンを作成
let mreg = new RegExp( /^\d/,’gm’ ); //ここ変更
//mstrの中から数字1を全て探しmresultに代入
let mresult = mstr.match( mreg );
//コンソールにmresultの中身を表示
console.log(mresult); // [“1”, “8”]
mフラグが無い場合1だけが抽出されます。
m フラグに「 $ 」
「 $ 」は行末をあらわします。mフラグと併用することで各行の行末に一致する項目をさがします。
// 適当に作った改行を含む文字をmstrに代入
let mstr = `123改行した45、
文字から探せる67
8mフラグ90`;
//数字$にgフラグとmフラグをつけパターンを作成
let mreg = new RegExp( /\d$/,’gm’ ); //ここ変更
//mstrの中から数字1を全て探しmresultに代入
let mresult = mstr.match( mreg );
//コンソールにmresultの中身を表示
console.log(mresult); // [“7”, “0”]
mフラグが無い場合0だけが抽出されます。
\d\nで行末の数値を探すこともあります。その場合最後の0には改行が含まれないので0は抽出されません。
sフラグ
ES2018から正規表現の新たなフラグとして追加されたsフラグです。
「.」はほぼ全ての文字にマッチする記号として使われていましたが、sフラグを使うことで改行にマッチさせることができます。
// 適当に作った改行を含む文字をstrに代入
let str = `例えば
こんな文`;
//strから改行を含む文字を全て取得
let result = str.match( /.+/s );
//コンソールにresultの中身を表示
console.log(result);
sフラグについては別でまとめているので、詳しくは以下をご参照ください。
uフラグ
Unicodeを扱う時に使うフラグです。絵文字
// 適当な絵文字をstrに代入
let str = “😀”;
//uフラグを
let result = str.match( /./u );
//コンソールにresultの中身を表示
console.log(result);
uフラグがないと文字化しました。
yフラグ
Unicodeを扱う時に使うフラグです。絵文字
// 適当な文字列をstrに代入
let str = “文字列を作成しました”;
//パターンを作成でyフラグ（stickyモード）をつけてregに代入
let reg = new RegExp( “作成” , “y” );
let num = 2; // ここを4に変えると作成にマッチ
// 開始位置を指定する
reg.lastIndex = num;
// 正規表現マッチを試みる
let result = str.match( reg );
// 出力テスト
if(result === null){
console.log(num + “番目に「作成」はいません。”);
}else
console.log(num + “番目に「作成」がいます。”);
yフラグがないとlastIndexで指定した位置指定が有効になりません。
おわり
フラグを調べていても、どのように動くかわからなかったのでサンプルコードを作成してみました。
動きを確かめるためだけのサンプルコードなので、あまり役立たないかもしれませんが参考に慣れば幸いです。後日、もっと深堀していきたいと思います。
実際にどのように使うか(使ったか)教えていただけたら嬉しいです。
