てくてくテック

【JavaScript】replaceメソッドで正規表現を使う際のフラグgについて

どーも!

たかぽんです!

先日正規表現を使ってreplaceをする際、正規表現にはない謎のフラグがあったので、それについてメモを残しておきます。

あまりみかけない正規表現?

こないだ他の方のレビューをしていて、お?こんな正規表現あるっけ・・・?

ということがあったので、それについて調べてみました。

実際のコードは以下のような感じでした。

const string = 'hogeとは、何の意味もない語句ですが、hogeは開発中頻繁にでてきます。';

// "hugoとは、何の意味もない語句ですが、hugoは開発中頻繁にでてきます。"
console.log(string.replace(/hoge/g, 'hugo'));

ぱっと見やっていることはさくっと理解できると思います。

文字列中から'/hoge/'という正規表現に一致する箇所を'hugo'に置換しています。

ただ、一般的な正規表現ではその後にgがつくことはありません。

そもそも"//"で囲われている範囲が正規表現のはずなので...

gって何だ・・・・?

ってなったわけですね。

gとは一体何だった?

結論からお話しすると...

gとはreplaceメソッド側のフラグで、一致する全ての箇所を置換するかを表していることがわかりました。

先ほどの例でいくと、元の文字列中にhogeは二箇所ありましたが、その二箇所とも置換したい場合はgをつける必要があるみたいです。

意味としては"globalのg"で、globalフラグは全てを置換という意味らしいですね。

逆に最初の一箇所だけ置換したい場合は...

このgフラグを外せば最初の一つだけ置換されます。

const string = 'hogeとは、何の意味もない語句ですが、hogeは開発中頻繁にでてきます。';

// "hugoとは、何の意味もない語句ですが、hogeは開発中頻繁にでてきます。"
console.log(string.replace(/hoge/, 'hugo'));

知ってみるとそんなことかぁ・・・って感じですねw

知らない正規表現なのかな?とか思って正規表現を調べていてもなかなか出てこないので厄介でしたw

他のフラグについて

調べるついでに他のオプションもあったのでそちらも調べてみました。

正規表現で置換をする際のフラグはgだけでなく、他にもiがあります。

iはignoreの省略で、大文字か小文字かを"無視"できるそうです。

試してみましょう。

検証のため、gフラグも立てていますが、置換箇所が一箇所であればiだけでも大丈夫です。

const string = 'HOGEはすべて大文字で、hogeは全部小文字です。そしてHoGeは一部が大文字ですが、すべて置換されます。';

// "hugoはすべて大文字で、hugoは全部小文字です。そしてhugoは一部が大文字ですが、すべて置換されます。"
console.log(string.replace(/hoge/gi, 'hugo'));

ちなみに、オプションをつける順序はどちらでも大丈夫なようです。

// "HOGEはすべて大文字で、hugoは全部小文字です。そしてHoGeは一部が大文字ですが、すべて置換されます。"
console.log(string.replace(/hoge/ig, 'hugo'));

上記のように、大文字と小文字の区別をせず、文字自体が一致しているなら置換対象にする場合にignoreを使用します。

逆にiを付けずにすると...

const string = 'HOGEはすべて大文字で、hogeは全部小文字です。そしてHoGeは一部が大文字ですが、すべて置換されます。';

// "HOGEはすべて大文字で、hugoは全部小文字です。そしてHoGeは一部が大文字ですが、すべて置換されます。"
console.log(string.replace(/hoge/g, 'hugo'));

中央の小文字のhogeのみ置換されます。

大文字小文字で差分があるからですね。

基本的なオプションはこの二つになっています。

まとめ

さて、今回はstringのフラグについて調べてみました。

jsで文字列置換をする際にはしっかりと知っておきたいですね...!

僕もこれからはなんだ?このg...?

とはならずにすみそうですw

それでわ!

モバイルバージョンを終了