こんにちは！
今回は、開発で正規表現を少し利用したので、JavaScriptで正規表現を扱う方法について、簡単にまとめてみます！

正規表現って...?

「正規表現」って、なんかお堅いお名前ついてますが...

正規表現

文字と記号を使って、パターンを指定し、そのパターンに合った文字を検索をする。
文字列だけでなく、数字も検索対象に含まれる。
書き方には、「正規表現リテラル」と「RegExpのコンストラクターを経由する」の2種類がある。

正規表現を利用することで、検索する文字列が曖昧な状態でもパターンを使って、検索することができます！

パターン指定でよく使われる記号(正規表現パターン)

ABC	「ABC」と言う文字列
[ABC]	A、B、Cのいずれか1文字
[^ABC]	A、B、C以外のいずれか1文字
[A-Z]	A〜Zの間の1文字
A\|B\|C	A、B、Cのいずれか
[0-9]	0〜9のいずれか
X*	0文字以上のX
X?	0または1文字のX
X+	1文字以上のX
X{n}	Xとn回一致
X{n,}	Xとn回以上一致
X{m,n}	Xとm〜n回一致
^	行の先頭に一致
$	行の末尾に一致
.	任意の1文字に一致
\w	大文字/小文字の英字、数字、アンダースコアに一致。([A-Za-z0-9_]と同意。)
\W	文字以外に一致([^\w]と同意。)
\d	数字に一致([0-9]と同意。)
\D	数字以外に一致([^0-9]と同意。)
\n	改行に一致
\t	タブ文字に一致
\s	空白文字に一致([\n\r\t\v\f]と同意。)
\S	空白以外の文字に一致([^\s]と同意。)
\〜	「〜」で表される文字

正規表現の作り方

①正規表現リテラル

let 変数 = /パターン/フラグ

②RegExpのコンストラクターを経由する

let 変数 = new RegExp('パターン', 'フラグ');

コンストラクターとは、クラスをnew演算子で実行したときに呼び出され、オブジェクトのプロパティを初期化する関数です。

ここで、「フラグ」というものが出てきました。「フラグ」は、正規表現の挙動を決めるためのものです。検索範囲や、大文字・小文字の区別などを指定することができます。以下が、主な「フラグ」です。

g	文字列全体に対して処理を行う(無指定であれば、1度一致したらおわり)
i	大文字・小文字を区別しない
m	複数行に対応
u	Unicode対応

文字列検索をやってみよう！

それでは、ちょっと使ってみましょう！
正規表現リテラルを使ったver.と、RegExpのコンストラクター経由したver.の2種類の使って、実践してみます！

execメソッド

テキストの中に含まれている「数字」を検索してみます。

// 正規表現リテラルver.
let sample1 = /[0-9]/;
let txt = 'テレフォンショッピング!午後3時までにお電話頂いた方には、割引！お電話は、0120-123-456まで！'
let result = sample1.exec(txt);
console.log(result);
/* 実行結果
3
*/

// RegExpのコンストラクター経由ver.
let sample2 = new RegExp('[0-9]', 'gi');
let txt = 'テレフォンショッピング!午後3時までにお電話頂いた方には、割引！お電話は、0120-123-456まで！'
let result2 = sample2.exec(txt);
console.log(result2);
/* 実行結果
3
*/

execメソッドで、1度に得られる結果は、最初の1つだけです。

matchメソッド

こちらも、テキストの中に含まれている「数字」を検索してみます。

// 正規表現リテラルver.
let sample3 = /[0-9]/gi;
let txt = 'テレフォンショッピング!午後3時までにお電話頂いた方には、割引！お電話は、0120-123-456まで！'
let result3 = txt.match(sample3);
console.log(result3);
/* 実行結果
[3, 0, 1, 2, 0, 1, 2, 3, 4, 5, 6]
*/

// RegExpのコンストラクター経由ver.
let sample4 = new RegExp('[0-9]', 'gi');
let txt = 'テレフォンショッピング!午後3時までにお電話頂いた方には、割引！お電話は、0120-123-456まで！'
let result4 = txt.match(sample4);
console.log(result4);
/* 実行結果
[3, 0, 1, 2, 0, 1, 2, 3, 4, 5, 6]
*/

matchメソッドもexecメソッドと同じように、検索をしていますが、matchメソッドの場合は、検索した全ての結果を返します。

置き換えをやってみよう！

正規表現を使って文字列検索をし、一致した文字列・数字・記号などを、任意の文字列などに置き換えることができます。

// 正規表現リテラルver.
let sample5 = /。|$/;
let txt = 'こんにちは。';
let result5 = txt.replace(sample5, '、JavaScriptよ！');
console.log(result5);
/* 実行結果
こんにちは、JavaScriptよ！
*/

// RegExpのコンストラクター経由ver.
let sample6 = new RegExp('。', 'gi');
txt = 'こんにちは。';
let result6 = txt.replace(sample6, '、JavaScriptよ！');
console.log(result6);
/* 実行結果
こんにちは、JavaScriptよ！
*/

「こんにちは。」と言う文字列の中で、句点(。)を検索してきて、句点(。)を「、JavaScriptよ！」に置き換えています！

replaceメソッドについてちょこっと解説

上のコードで、「matchメソッドも使ってないし、どこで検索してるの？」と思ったかと思います。
replaceメソッドの解説をしてみます！

let 変数 = 検索する文字列.replace(正規表現(検索したいパターン), 置き換えたい文字列など);

第一引数に検索するパターンを渡し、そのパターンに一致した部分を第二引数に渡した文字列などに置き換えるのです！
もし、パターンに一致する部分がなければ、何も変化していない「検索する文字列」がそのまま返ってくるのみです！

まとめ

JavaScriptのテキストの正規表現の項目を初めて見たときは、「記号だらけでわけわからん！」と思い、少し勉強する気が失せそうだったのですが、実際に使ってみると、便利で、面白かったです！
開発の幅が広がった気がします！

お読みくださり、ありがとうございました！
もし、間違いや補足などございましたら、コメント頂けますと助かります！

参考文献

柳井政和著『JavaScript[完全]入門』(2021)p.238〜p.248
山田祥寛著『改訂新版 JavaScript本格入門~モダンスタイルによる基礎から現場での応用まで』(2018)p.151〜161

JavaScriptで正規表現を扱ってみた！【備忘録】