Typescript エスケープが必要な文字で正規表現マッチ

正規表現について

正規表現とは

文字列の中に特定のパターンを照合して拾ってきたりすることを指します。

例）[abc, sample@example.com, 090-9009-8921] の配列からメールアドレスの要素を抜き取る。

Javascript, Typescriptでは主に以下の関数で使用されます。

match(), matchAll(), replace(), replaceAll(), search(), split()

初歩的な内容になるかもですが、基本的な使い方を抑えるためにざっとご紹介いたします！

match

その名の通り、文字列にマッチしたものを取得します。

const str = 'My Name is Shumpei';
const regex = /[A-Z]/;
const regex2 = /[A-Z]/g;
str.match(regex);
[ 'M', index: 0, input: 'My Name is Shumpei', groups: undefined ]
str.match(regex2);
["M", "N", "S"]

正規表現の末尾にgを付与することで全てにマッチ（globalかな?）するかどうかのフラグを立てられます。

matchAll

matchAllでは全てのものに対してイテレータ形式（matchでgフラグを使用しなかったもの）で返します。

const str = "apple";
const regex = /p/g;

for (const match of str.matchAll(regex)) {
  console.log(match);
}
[ 'p', index: 1, input: 'apple', groups: undefined ]
[ 'p', index: 2, input: 'apple', groups: undefined ]

replace

replaceで正規表現を使用する際の構文は以下のとおりです。

判定したい文字列.replace(正規表現, 置換したい文字列)

const str = "My Name is Shumpei"
const regex = /Shumpei/
console.log(str.replace(regex, "Murakami"))
My Name is Murakami

replaceAll

replaceではマッチした１つのみを置換いたしますが、replaceAllはマッチした全ての文字列を置換します。

"apple apple apple".replace(/apple/, "orange")
"orange apple apple"

"apple apple apple".replace(/apple/, "orange")
"orange apple apple"

上記のようにreplaceAllではマッチした全ての文字列を置換可能です。

search

searchも比較的シンプルで、マッチした文字列indexを返却します。

const str = "apple"
const str2 = "orange"

str.search(/p/)
1
str2.search(/p/)
-1

split

splitは文字列を正規表現にマッチした条件で配列に分割してくれます。

const str = "My Name is Shumpei. How are you ?"
str.split(/a/)
[ 'My N', 'me is Shumpei. How ', 're you ?' ]

エスケープが必要な文字列一覧

typescriptの正規表現の文字判定で、以下の文字は特殊文字のため文字列判定にそのままでは使用できません。

.*+?^${}()|[\]\\

なので上記文字をマッチしたい文字列として正規表現で使用する際は以下のようにエスケープしてください。

const character = "?" 
const regex = '(' + character.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')';
const match = "abc?".match(regex);
⇛[ '?', '?', index: 3, input: 'abc?', groups: undefined ]

まとめ

地味に上記ポイントを抑えていないと予期せぬクラッシュを招くために、文字列マッチを正規表現で組み込む際は注意して導入してください。