JavaScriptの正規表現入門:よく使うパターンと書き方まとめ
はじめに
正規表現(Regular Expression)は、文字列のパターンを表現する記法です。JavaScriptでは文字列の検索・置換・バリデーションなど、さまざまな場面で使います。
「難しそう」と敬遠されがちですが、よく使うパターンは限られています。この記事では実用的なものに絞って解説します。
正規表現の書き方
JavaScriptの正規表現は /パターン/フラグ と書きます。
const regex = /hello/;
const regex2 = new RegExp('hello'); // 同じ意味
通常はリテラル記法(/パターン/)を使います。変数を埋め込みたい場合だけ new RegExp() を使います。
基本的なメソッド
test() — マッチするか確認する
const regex = /hello/;
regex.test('hello world'); // true
regex.test('goodbye'); // false
バリデーションなど「含むかどうか」だけ知りたいときに使います。
match() — マッチした文字列を取得する
const str = 'today is 2024-05-16';
const result = str.match(/\d{4}-\d{2}-\d{2}/);
console.log(result[0]); // '2024-05-16'
マッチしない場合は null を返します。
replace() — 置換する
const str = 'Hello World'; str.replace(/World/, 'JavaScript'); // 'Hello JavaScript'
フラグ g をつけると全件置換になります。
'aaa'.replace(/a/g, 'b'); // 'bbb'
split() — 分割する
'a,b,,c'.split(/,+/); // ['a', 'b', 'c']
フラグ
正規表現のスラッシュの後ろにフラグをつけると動作が変わります。
| フラグ | 意味 |
|---|---|
g |
全件マッチ(グローバル) |
i |
大文字・小文字を区別しない |
m |
複数行モード(^ $ が各行に対応) |
/hello/i.test('HELLO'); // true(大文字小文字を無視)
'Hello hello'.match(/hello/gi); // ['Hello', 'hello']
よく使うパターン
数字
/\d/ // 数字1文字(0〜9)
/\d+/ // 数字1文字以上
/\d{4}/ // 数字ちょうど4文字
/\d{2,4}/ // 数字2〜4文字
文字種
/\w/ // 英数字またはアンダースコア([a-zA-Z0-9_]) /\s/ // スペース・タブ・改行などの空白 /./ // 改行以外の任意の1文字
位置
/^hello/ // 行頭が「hello」 /hello$/ // 行末が「hello」 /^hello$/ // 「hello」だけ(完全一致)
よく使う実例
メールアドレスの簡易チェック
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
emailRegex.test('user@example.com'); // true
emailRegex.test('invalid'); // false
電話番号(ハイフンあり・なし両対応)
const telRegex = /^0\d{1,4}-?\d{1,4}-?\d{4}$/;
telRegex.test('03-1234-5678'); // true
telRegex.test('0312345678'); // true
URLからドメイン部分を取得
const url = 'https://example.com/path?query=1'; const match = url.match(/https?:\/\/([^\/]+)/); console.log(match[1]); // 'example.com'
日付(YYYY-MM-DD形式)
const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
dateRegex.test('2024-05-16'); // true
dateRegex.test('2024/05/16'); // false
キャプチャグループ
() で囲むと、マッチした部分を取り出せます。
const str = '2024-05-16';
const match = str.match(/(\d{4})-(\d{2})-(\d{2})/);
console.log(match[1]); // '2024'(年)
console.log(match[2]); // '05'(月)
console.log(match[3]); // '16'(日)
replace() と組み合わせて日付フォーマットを変換することもできます。
'2024-05-16'.replace(/(\d{4})-(\d{2})-(\d{2})/, '$1年$2月$3日');
// '2024年05月16日'
TypeScriptで使う場合
TypeScriptでは match() の戻り値が RegExpMatchArray | null になるため、null チェックが必要です。
const str = 'today is 2024-05-16';
const match = str.match(/(\d{4}-\d{2}-\d{2})/);
if (match) {
console.log(match[1]); // '2024-05-16'
}
まとめ
| やりたいこと | 使うメソッド |
|---|---|
| 含むか確認 | regex.test(str) |
| マッチ部分を取得 | str.match(regex) |
| 置換 | str.replace(regex, replacement) |
| 分割 | str.split(regex) |
/パターン/フラグで書くのが基本gで全件、iで大文字小文字を無視()でキャプチャグループを作るとマッチ部分を取り出せる
特定の文字に囲まれた中身を抜き出すパターンは「正規表現でカッコなどに囲まれた中身を抜き出す」で解説しています。