【JavaScript】正規表現まとめ

## 正規表現とは

正規表現とは、ある文字列の中に存在する、パターンを表現するものです。
例えば郵便番号を表現するパターンは「0から9の数字のいずれかを、7回繰り返す」となります。
このようなパターン（正規表現）は後述する、「特殊文字」を組み合わせて記述できます。
正規表現は主に、文字列の検索や置き換えなどに使えます。

## 定義方法
JavaScriptで正規表現を定義する方法は2つあります。

### 正規表現リテラル

```javascript
// /パターン/オプションフラグ（後述）
const re = /abc/i;
```

正規表現リテラルはスクリプトが読み込まれたタイミングで、コンパイルされます。
そのため正規表現のパターンが変わらない場合は、こちらの定義方法のほうがパフォーマンスが良いです。

### RegExpコンストラクター

```javascript
// new RegExp('パターン', 'オプションフラグ（後述）')
const re = new RegExp('abc', 'i');
```

こちらは関数実行時にコンパイルされます。
そのため正規表現のパターン内にユーザーの入力値を使いたい、などパターンが変わる場合はこちらの定義方法を使います。

## 特殊文字

正規表現は特殊文字を組み合わせて記述します。

| 文字 | 説明 |
| --- | --- |
| ^ | 行の先頭にマッチする |
| $ | 行の末尾にマッチする |
| * | 直前の文字の0回以上の繰り返しにマッチする |
|+| 直前の文字の1回以上の繰り返しにマッチする |
|?| 直前の文字の0回か1回の繰り返しにマッチする |
|{n}| 直前の文字のn回の繰り返しにマッチする |
|{n,}| 直前の文字のn回以上の繰り返しにマッチする |
|{n,m}| 直前の文字のn~m回の繰り返しにマッチする |
|.| 改行文字以外の文字と一致 |
| \ | エスケープ文字 |
| [abc] | 角括弧で囲まれた文字のいずれか一個にマッチする |
| [a-z] | 指定した範囲の文字にマッチする |
| [^abc] | 角括弧で囲まれた文字以外の文字にマッチする |
| \s | 空白にマッチする |
| \w | 英字、数字、アンダースコアにマッチする |
| \W | \w でマッチしない文字とマッチする |
| \d | 数字とマッチする |
| \D | 数字以外とマッチする |
| \n | 改行とマッチする |
| \r | 復帰 とマッチする |

例えば郵便番号の正規表現は以下のように表すことができます。

```javascript
// 先頭から末尾の間に、0から9の数字のいずれかを、7回繰り返す
const postCode = /^[0-9]{7}$/
```

## オプションフラグ

正規表現には、オプションフラグがあります。
これらは1つでも複数でも使用でき、順序は問いません。
オプションフラグにより、グローバル検索、大文字小文字を問わない検索、などを実現できます。

| オプションフラグ | 説明 |
| --- | --- |
| d | 一致した部分文字列の位置を生成する |
| g | グローバル検索を行う |
| i | 大文字・小文字を区別しない検索を行う |
| m | 複数行の検索を行う |
| s | `.`が改行文字に一致するようにする |
| u | unicode対応 |
| y | 対象文字列の現在の位置から始まる部分に一致するものを探す「先頭固定」検索を行う |

## 正規表現を使用するメソッド
JavaScriptでは正規表現を、RegExpオブジェクトのtest()とexec()、Stringオブジェクトのmatch()、replace()、search()、split()とともに使用できます。

### test()
正規表現にマッチする文字列があるかを判定し、true/falseを返します。

```javascript
const str = "ABCDEFG";

const re = /[a-c]/i;

const resultTest = re.test(str);

console.log(resultTest);  // true
```

### exec()
正規表現にマッチする文字列があるかを検索し、結果を配列で返します。

```javascript
const str = "ABCDEFG";

const re = /[a-c]/i;

const resultExec = re.exec(str);

console.log(resultExec);  // ['A', index: 0, input: 'ABCDEFG', groups: undefined]
```

### match()
正規表現にマッチする文字列があるかを検索し、結果を配列で返します。
RegExpオブジェクトのexec()と基本的に同じですが、gオプションをつけた場合の結果が異なります。
gオプションをつけた場合、マッチする文字列の配列を返します。

```javascript
const str = "ABCDEFG";

const re = /[a-c]/ig;

const resultMatch = str.match(re);

console.log(resultMatch);  // ['A', 'B', 'C']
```

### replace()
正規表現にマッチする文字列を、他の文字列と置き換えることができます。

```javascript
const str = "ABCDEFG";

const re = /a/i;

const resultReplace = str.replace(re, 'Z');

console.log(resultReplace);  // ZBCDEFG
```

### search()
正規表現にマッチする文字列があるかを検索し、一致した位置を返します。

```javascript
const str = "BCDEFGA";

const re = /a/i;

const resultSearch = str.search(re);

console.log(resultSearch);  // 6
```

### split()
正規表現にマッチする文字列を区切りとして、文字列を分割することができます。

```javascript
const str = "2022/10/25";

const re = /\//;

const resultSplit = str.split(re);

console.log(resultSplit);  // ['2022', '10', '25']
```

## 参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

https://qiita.com/iLLviA/items/b6bf680cd2408edd050f

https://rightcode.co.jp/blog/information-technology/javascript-regularexpression

https://zenn.dev/hinoshin/articles/470ce8e10caccc

https://ics.media/entry/221020/

## 採用のお知らせ
株式会社Relicでは、フロントエンドエンジニアを積極的に採用中です。
またRelicでは、地方拠点がありますので、U・Iターンも大歓迎です！🙌
少しでもご興味がある方は、Relic採用サイトからエントリーください！

https://relic.co.jp/categories/job_4?utm_source=qiita&utm_medium=article&utm_campaign=qiita_article