【JavaScript入門】正規表現を利用するメソッド

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

　正規表現 (Regular Expression, RegExp) は、文字列パターンを表現し検索・抽出・置換などを強力かつ簡潔に行うための仕組みです。
JavaScript では

RegExp オブジェクト … パターンそのものを保持し、検索用メソッドを提供
String オブジェクト … 文字列側から正規表現を受け取り、検索・置換などを実行

という二つの立場から API が用意されています。
　ここでは、両者の代表的メソッドを体系的に整理し、実用的な HTML + JavaScript サンプルを通して「実務でどう使うか」までを解説します。

１．RegExp オブジェクトのメソッド

メソッド	戻り値	主な用途	g フラグ有無による違い
`exec(s)`	一致情報を含む配列 / `null`	詳細な一致情報が欲しいとき	文字列 s の中で一致するものを検索する。一致するものがあれば最初の情報を格納した配列を、それ以外は null を返す。 g 無し：常に先頭一致のみ g 有り: `.lastIndex` を更新しながら次々取得。異なる文字列を調べる前に `.lastIndex = 0` を忘れずに。
`test(s)`	`true` / `false`	存在確認・条件分岐	文字列 s の中で一致するものがあれば true を、なければ false を返す。

1.1. `exec()` と `.lastIndex`

文字列の中で一致するものを検索する。

const re = /[A-C]級/i;      // 大文字小文字無視 + g
console.log(re.exec('B級です'));   // => ['B級', index: 0, input: 'B級です', groups: undefined]
console.log(re.exec('A級です'));   // => ['A級', index: 0, input: 'A級です', groups: undefined]

1.2 .`test()`

真偽値だけ欲しい場合に最速。フォーム入力バリデーションなど if 文と相性抜群です。

const urlRe = /^https?:\/\//i;
console.log(urlRe.test('https://example.com')); // true
console.log(urlRe.test('ftp://example.com'));   // false

２．String オブジェクトのメソッド

メソッド	戻り値	主な用途	備考
`match(r)`	配列 / `null`	先頭一致 or g 付きで全一致	詳細情報が欲しいときは RegExp を自作しない場合でも使える
`matchAll(r)`	反復子 (Iterator)	全一致をイテレータで走査	`r` は必ず g フラグ付き
`search(r)`	先頭位置 / `-1`	位置検索	最初の一致位置のみ
`replace(r, s)`	パターンの 1 つ、いくつか、またはすべての一致を指定した置換で置き換えた新しい文字列	置換後文字列	置換
`split(r)`	配列	文字列分割	区切り文字列として正規表現を使用

2.1. `match()` と `matchAll()`

match() は g 無しなら最初の一致のみ、g 有りなら全一致配列。matchAll() は常に全一致を返しつつ位置情報も保持した反復子を返すため、大量データを逐次処理する場合に便利です。

const text = '郵便番号:123-4567 と 987-6543 を検出';
console.log(text.match(/\d{3}-\d{4}/));     // g 無し → 1 件目のみ
for (const m of text.matchAll(/\d{3}-\d{4}/g)) {  // g 有り → 2 件
  console.log(m[0], '位置', m.index);
}

2.2. `search()`

「その単語がどこにある？」を知りたいときに最短。-1 判定で存在チェックも可能です。

2.3. `replace()`

第 2 引数が関数の場合、キャプチャ内容を基に自由に加工できます。

// 正規表現オブジェクトを作成
const re = /[!！]+/;

// .replace()の結果をコンソールに出力
console.log('助けて！！！！'.replace(re, '。'));  // 助けて。
console.log('助けて!!!!!'.replace(re, '。'));  // 助けて。

2.4. `split()`

文章を「読点・句点・助詞」など複数の区切りで分割したい場合に重宝します。

３．実践 HTML サンプル

メールアドレス抽出 & 強調表示

ファイル名： email_highlighter.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メールアドレス抽出デモ</title>
<style>
  mark { background: #ffeb3b; }
  body { font-family: sans-serif; line-height: 1.7; }
</style>
</head>
<body>
<p id="src">
  ご連絡は info@example.com または support@example.co.jp までお願いします。
</p>

<script>
(() => {
  // 抽出用正規表現（極簡易版）
  const mailRe = /[\w.-]+@[\w.-]+\.[A-Za-z]{2,}/g;

  // 対象文字列
  const p = document.getElementById('src');
  const original = p.textContent;

  // 抽出結果を配列で取得
  const mails = original.match(mailRe) || [];

  // 強調表示用に置換
  const highlighted = original.replace(mailRe, m => `<mark>${m}</mark>`);
  p.innerHTML = highlighted;

  // 結果をコンソールにも出力（学習用）
  console.log('抽出したメールアドレス:', mails);
})();
</script>
</body>
</html>

デバックコンソールの出力

抽出したメールアドレス: (2) ['info@example.com', 'support@example.co.jp']

ブラウザ表示

info@example.com と support@example.co.jp が黄色マーカー付きで表示されます。

プログラム解説

正規表現
・[\w.-]+ … ユーザー名部分 (英数・アンダースコア・ピリオド・ハイフン)
・@ … 区切り
・[\w.-]+ … ドメイン
・\.[A-Za-z]{2,} … TLD (トップレベルドメイン)
match() で全一致を配列取得し、replace() で <mark> タグを挿入。
日本語メッセージは console.log('抽出したメールアドレス:', mails); のように出力。

４．正規表現フラグと高度なテクニック

主要フラグ早見表

フラグ	意味	典型例
g	global 検索	すべての一致を取得
i	ignoreCase	大文字小文字無視
m	multiline	`^` `\$` を行頭行末に作用
s	dotAll	`.` が改行にもマッチ
u	unicode	Unicode コードポイントを正しく扱う
y	sticky	`.lastIndex` 位置からのみ検索

まとめ

JavaScript の正規表現 API は

RegExp メソッド … 低レベルかつ詳細情報 (exec, test)
String メソッド … 文字列側から手軽に操作 (match, replace など)

の二系統を押さえることで自在に使い分けられます。
　まずは g / i フラグと match() / replace() を組み合わせ、日常的なログ解析やフォームバリデーションを作ってみると理解が深まります。

【JavaScript入門】正規表現を利用するメソッド