JavaScriptでの正規表現の使い方と種類を抑えておこう

JavaScriptでは、文字列の置き換えや検索を行うには「正規表現」を覚えると便利です。

正規表現は[/正規表現/」の様に「//」で囲みます。

正規表現の種類

パターン意味
aaという1文字
abcabcという文字列
[abc]a,b,cの1文字
[a-z]a~zの間の1文字[a-c]や[A-Za-z]といった指定も可能
[^abc]x,y,z以外の1文字
[^a-z]a-z以外の1文字
abc|xyzabcまたはxyzという文字列
|数字|同じ正規表現を繰り返す回数
^a最初の文字がa
a$最後の文字がa
.改行文字を除く、1文字
a*aが0個以上続く
直後の文字をエスケープする。正規表現で意味のある文字をエスケープするために使う。
例えば、[という文字にマッチさせたければ「[」と書きます。
d数字[0-9]と同じ意味
D数字以外。[^0-9」と同じ意味
w英数字、アンダースコア。[A-Za-z0-9_]と同じ意味
sスペース、タブ、改ページ、改行などの空白文字
S空白文字以外の文字。[^s]と同じ意味
t水平タブ
n改行コード
正規表現の主な種類

サンプルコード

サンプルコードとして、URLからクエリ文字列で値を分けて配列として取得するサンプルコードを紹介します。

Output
split( /&|?/ )
Pug
.container.my-5
	table.table
		tr
			th split( /&|?/ )
			td.result1
JavaScript
const targetString = 'https://example.com/?id=1234567890&name=satou&gender=male';
//正規表現で切り抜き
document.querySelector('.result1').innerHTML = targetString.split( /&|?/ );

正規表現の解説

上記のサンプルコードでは正規表現として「/&|?/」を適用しています。

解説すると、まず「/正規表現/」で囲むルールなので最初と最後に「/」が書かれています。

実際の正規表現部分は、「 &|? 」の部分です。

これは、上記の表の中の「 abc|xyz ・・・ abcまたはxyzという文字列 」を利用して、「&または?」という意味を表します。

更に、「?」の前についている「/」ですが、これは「?」でエスケープシーケンスの1つで、セキュリティ上の理由で「?」はそのまま使えないため、「/?」としてエスケープしているわけです。

よって、最終的な正規表現が「 /&|?/ 」なるわけです。

インストラクター
コメント

コメントを残す