ES2018の正規表現の新機能を試してみた

参考

- [New JavaScript Features That Will Change How You Write Regex](https://www.smashingmagazine.com/2019/02/regexp-features-regular-expressions/)
- [あなたの知っている正規表現はもう古い！　正規表現の新常識（ES2018編） - Qiita](https://qiita.com/uhyo/items/13e8bd7e616f83a463e5)

**↑の内容を元に試しただけという内容ですので、正しい情報が欲しい方は参考ページを見て、本記事は見なくても良いです。**
自分の備忘録として投稿させていただきました。
間違っている箇所などあれば、コメントなどよろしくお願いいたします :bow:

---

# tl;dr

以下の機能が追加されるようなので試します

- s (dotAll) flag for regular expressions
- RegExp named capture groups
- RegExp Lookbehind Assertions
- RegExp Unicode Property Escapes

http://kangax.github.io/compat-table/es2016plus/

ちなみにすでにchromeでは動くので、babelなどを使わずそのまま実行していきます。

※2019/2/17現在

![image.png](https://qiita-image-store.s3.amazonaws.com/0/142910/d5828716-4c13-c233-3b6c-912a79fe9599.png)

# s (dotAll) flag for regular expressions

オプション無しのデフォルトでは、`.` (ドット)は改行文字にはマッチしないのですが、`s` オプションをつけることで改行にもマッチします

```js
// sオプション無し -> false
/foo.bar/.test(`foo
bar`)

// sオプション有り -> true
/foo.bar/s.test(`foo
bar`)
```

<img width="786" alt="Screen Shot 2019-02-17 at 23.18.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/142910/e0d1f7da-3029-4a48-0521-d276fb30a3c6.png">


# RegExp named capture groups

マッチした文字列を連想配列みたいな感じで取れる。

```js
const { year, month, day } = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/.exec('2020-03-04').groups
console.log(year, month, day) // 2020 03 04
```

↓のように `groups`から値を受け取れます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/142910/129053b0-7d9f-e141-9a72-2f5136980b85.png)

`\k`で使いまわすこともできる!

```javascript
const re = /(?<dup>ABC)x+\k<dup>/.test('ABCxxxABC'); // true
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/142910/3bea9064-f195-a67f-e84b-5d3f640282d1.png)

replaceでも使うことができる!

```js
console.log('War & Peace'.replace(/(War) & (Peace)/, '$2 & $1'));  // Peace & War 
console.log('War & Peace'.replace(/(?<War>War) & (?<Peace>Peace)/, '$<Peace> & $<War>'));  // Peace & War

// 関数だとこうなる
const result = 'War & Peace'.replace(/(?<War>War) & (?<Peace>Peace)/, function(match, group1, group2, offset, string) {
    return group2 + ' & ' + group1;
});
console.log(result);    // Peace & War
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/142910/8c63702d-e9ee-c4f8-0f96-d618c6d15173.png)

# RegExp Lookbehind Assertions

今まで先読みしかできなかったのですが、後読みの機能が追加されたようです。

```js
console.log(/(?<=a)b/.test('ab')) // true
console.log(/(?<!a)b/.test('cb')) // true
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/142910/eda5b125-c1cd-24d3-516b-daea54f5cf45.png)

以下のページも参考

- [Javascriptでの正規表現の後読みの代替 - Qiita](https://qiita.com/knagisa/items/a37520974e39b25b7a6f)

情報ありがとうございます:bow:

# RegExp Unicode Property Escapes

以下のページのreadmeを参考にしつついくつかサンプルを試してみました

- [tc39/proposal-regexp-unicode-property-escapes](https://github.com/tc39/proposal-regexp-unicode-property-escapes)

※`Number`以外にもありますが、一番手軽に試せたので`Number`で確認しました。

```js
// 半角の１
console.log(/\p{Number}/u.test(1)); // true

// 全角の１
console.log(/\p{Number}/u.test('１')); // true

// ローマ数字などの10進以外の記号を含む、Unicodeの任意の数字記号と一致
console.log(/^\p{Number}+$/u.test('²³¹¼½¾𝟏𝟐𝟑𝟜𝟝𝟞𝟩𝟪𝟫𝟬𝟭𝟮𝟯𝟺𝟻𝟼㉛㉜㉝ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫⅬⅭⅮⅯⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹⅺⅻⅼⅽⅾⅿ')); // true
```

`\p`を`\P`とすると否定になるようです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/142910/aa495ff5-c7dd-57a2-8cdc-5be35ddc8194.png)


---

最後まで読んでいただきありがとうございましたm(_ _)m