😽

【JS】正規表現まとめ

2021/09/19に公開

正規表現を知っていると何かと便利です。

けれど、僕はJavaScriptにおいての正規表現のやり方をきちんと理解していなかったので、調べました。

同じように、

「正規表現がどんなものかはわかるけど、JSではどうやるかわからない。」

という方に参考にしていただければと思います。

1、定義の仕方


JavaScriptにおいて正規表現を定義する方法は2つあります。

1つ目は正規表現リテラルを使う方法です。

要は、スラッシュで囲む方法です。

もう1つは、RegExpコンストラクターを使う方法です。

以下がその具体例になります。


//正規表現リテラルによる定義(/パターン/オプション)
//ABCという文字列にマッチするか
const ABC = /ABC/;
//AかBかC何かにマッチするか
const AorBorC = /[ABC]/;
//ABC以外にマッチするか
const notAanBbandC = /[^ABC]/;
//A~Zの何かにマッチするか
const AtoZ = /[A-Z]/;
//ABCという文字列全てをサーチする
const ABC = /ABC/g;

//RegExpによる定義(new RegExp('パターン','オプション'))
//Aという文字に一致する全てをサーチ
const str = new RegExp('A','g');
//Aかaという文字にマッチするか
const str = new RegExp('A','i');

正規表現にはオプションがあり、その主な例は以下になります。

オプション 説明
g グローバルサーチ。文字列全体に対してマッチングするか
i 大文字/小文字を区別しない
m 複数行の入力文字列を複数行として扱う
u Unicode対応

ちなみに、この2つの定義の仕方は上手く使い分ける必要があります。

というのも、正規表現リテラルのパターンはスクリプトのロード時にコンパイルされ、RegExpを使った定義は実行時にコンパイルされます。

なので、

  • パターン内で変数を使いたいとき
  • 動的にパターンを変化させたいとき
  • 外からパターンを受け取りたいとき

などはRegExpを使い、それ以外はリテラルを使った定義をするのがベストです。

2、正規表現の書き方


複雑な正規表現を書くためには正規表現パターンというものを知っておく必要があります。

以下がその一覧になります。

文字 説明
^ 行の先頭にマッチする
$ 行の末尾にマッチする
* 直前の文字の0回以上の繰り返しにマッチする
+ 直前の文字の1回以上の繰り返しにマッチする
? 直前の文字の0or1回の繰り返しにマッチする
{n} 直前の文字のn回の繰り返しにマッチする
{n,} 直前の文字のn回以上の繰り返しにマッチする
{n,m} 直前の文字のn~m回の繰り返しにマッチする
[ABC] ABC何か一文字に一致
[^ABC] ABC以外一文字に一致
. 改行文字以外の文字と一致
\w 英数字と_に一致
\W 文字以外に一致
\d 数字に一致
\D 数字以外に一致
\n 改行に一致
\t タブ文字に一致
\r 復帰に一致
\s 空白文字に一致
\S 空白文字以外に一致

ちなみに、Macだとoption押しながら¥でバックスラッシュが打てます。

3、正規表現を使う場面


正規表現を使う場面は主に6つあります。

それは以下の通り

メソッド 説明
match マッチした文字列を配列で返します
exec マッチした文字列をと詳細な情報を配列で返します
test 1つでもマッチしたらtrueを返し、マッチしなければfalseを返します
search 最初にマッチした文字列の位置を返します
replace マッチした文字を置き換えます
split マッチした場所で区切って配列を返します

4、実際に使ってみた


では、実際に使うとどうなるのかやっていきましょう。

今回は例題として、

与えられた文字列の中からABCという文字列の数を数えるプログラム(大文字小文字は区別しない)

を作っていきます。

これは、実際に僕がコーディングテストで出されたことのある例題です。

テストを受けた時はif文をネストさせて実装しましたが、今回はスマートに正規表現を使って書いていきたいと思います。

const targetStr = "abcbcabacbabcbabcbabcABCbaabcbabcbabcABCb"; //今回対象となる文字列
const abcPattern = /abc/gi;
const matchedArr = targetStr.match(abcPattern);

console.log(matchedArr.length);

こうして見るとかなりシンプルに書くことができますね、、

おわりに


JSでの正規表現のやり方について解説していきました。

正規表現を書けるのと書けないのとでは、コーディングの質が大きく異なるのでこの機会にマスターしてしまいましょう。

また、この記事をチートシートとして活用していただければと思います。

最後に宣伝です。

0からエンジニアになるためのノウハウをブログで発信しています。
https://hinoshin-blog.com/

また、YouTubeでの動画解説も始めました。
YouTubeのvideoIDが不正ですhttps://www.youtube.com/channel/UCqaBUPxazAcXaGSNbky1y4g

インスタの発信も細々とやっています。
https://www.instagram.com/hinoshin_enginner/

興味がある方は、ぜひリンクをクリックして確認してみてください!

おわり

Discussion