あなたのブラウザで regex はどう動くのか?
あらゆる JavaScript ランタイムはネイティブな正規表現エンジンを内蔵しており、new RegExp(pattern, flags) がパターンをコンパイルし、その後 String.prototype.match、String.prototype.replace、RegExp.prototype.exec といったメソッドが任意の入力文字列に対してそれを実行します。本テスターはそのエンジンを UI に包み込み、ブラウザを離れることなくパターンの編集・実行・検査ができるようにします。あなたが入力するもの — パターン、フラグ、テスト文字列、置換 — はネットワークに送信されません。
regex テスターはどのように動作しますか?
パイプラインはいくつかの短いステップから成り、すべて各キー入力時にクライアント側で実行されます（入力を滑らかに保つために 150 ms のデバウンス付き）:
- パターン本体は上のフィールドから読み取られます（先頭・末尾の
/区切りはなく、装飾です）。選択されたフラグピルはgiやgimsuyのようなフラグ文字列に連結されます。 new RegExp(patternBody, flags)がパターンをコンパイルします。エンジンがSyntaxErrorを投げた場合（例: 括弧が対応していない、無効なエスケープ）、メッセージがテスト文字列の上に表示され、マッチ一覧はクリアされます。コンパイルエラーは V8 / SpiderMonkey / JavaScriptCore の実際のerr.messageなので、DevTools で見るものと同じです。- マッチ一覧では、テスターは常に合成的な global フラグで列挙します — そのため
gをオフにしてもすべての一致が一覧に表示されます。幅ゼロのマッチに対する標準ガード (if (m.index === rx.lastIndex) rx.lastIndex++) は、空文字列に一致するパターンでループが回り続けるのを防ぎます。置換モードは実際のフラグセットを尊重するため、$&はString.prototype.replaceと同じ振る舞いをします。 - 各反復の合間に、テスターは
performance.now() - startをチェックし、50 ms が経過した時点で中止します。これは(a+)+$のような入力を長いaの並びに当てた場合の破滅的バックトラッキングを防ぎます — そうでなければタブが固まります。ガードはベストエフォートです: 単一一致の病的なパターンは、1 回のexec呼び出し内でも時間を消費し得ます。その場合はタブをリロードし、非貪欲な量指定子やアトミック・所有的なスタイル（例:[^x]*x）でパターンを書き換えてください。 - テスト文字列は各一致の範囲でセグメントに分割され、一致したセグメントは
<mark class="rx-match rx-cap-N">要素で包まれます。Nは 6 色のパレット間を循環するので、隣接する一致が一目で見分けられます。各一致の番号付きグループ (m[1],m[2], …) と名前付きグループ (m.groups) はラベル付きの行として下に描画されます。dフラグが有効な場合、グループごとの[start, end]インデックスも表示されます。
なぜこの regex テスターを使うのか?
- プライバシー: すべてのパターン、テスト文字列、置換は、ブラウザに組み込まれた JavaScript RegExp エンジンを使ってあなたのブラウザ内で実行されます。何もタブを離れません — 入力が顧客のログ、漏洩した認証情報のパターン、その他ホスト型 SaaS の regex プレイグラウンドに貼りたくないものである場合に重要です。
- 誠実な方言: テスターは Node.js、Chrome、Safari、Firefox、そしてあらゆるブラウザベースのフォームバリデータが実行する regex エンジンそのものを公開します。Perl 方言への翻訳層によって細かな違いが隠されることはなく — ここで動くものはあなたのコードでも動きます。
- キャプチャと名前付きグループのデバッグ: 各番号付きグループ (
$1,$2, …) と名前付きグループ ($<year>) が一致ごとに表示され、パーサを構築してスロットを推測なしで読み取れます。置換モードでは自由にグループを組み合わせられます —$2-$1は最初の 2 スロットを入れ替え、$<name>は名前付きスロットを挿入し、$&は一致全体をエコーします。 - 破滅的バックトラッキング対策: 列挙に対する 50 ms の上限が、
(a+)+$のような病的なパターンがタブを凍結させる前にそれらを中止します。固まったブラウザではなく説明的なエラーが表示され、ページは即座に復旧します。
regex テスターの一般的な用途は何ですか?
正規表現は Web 開発、セキュリティ、データ作業に登場します — 本テスターは最も一般的なユースケースを対象とします:
- フォーム検証: メール、電話番号、郵便番号などのパターンを試作し、サンプル入力をテスト文字列に貼り付け、各正例が一致し各反例が一致しないことを確認してから本番コードにパターンを送り出します。
- ログ解析: NGINX、アプリ、監査ログの出力片を貼り付け、関心のある部分に名前付きグループを使ったパターンを書き (
(?<ip>…) (?<path>…))、一致ごとにキャプチャされたスロットを読み取ってパーサが正しいことを確認します。 - リファクタ用の検索置換: 置換モードを使ってスニペット内の識別子を書き換えます —
(\w+)\.set(\w+)\(→$1.$2 =がセッター呼び出しをプロパティ代入に変え、ライブプレビューが codemod にコミットする前に結果を表示します。
regex の例はどんな見た目ですか?
パターン (\d{4})-(\d{2})-(\d{2}) に g フラグを付け、テスト文字列 release 2025-11-15, prerelease 2026-05-25 に対して実行します。エンジンは 2 件の一致を見つけます。1 件目は 2025-11-15、グループ 1 = 2025、グループ 2 = 11、グループ 3 = 15。2 件目は 2026-05-25 で、同じグループ構造です。置換モードでは、置換テンプレート $3/$2/$1 が両方の日付を 15/11/2025 と 25/05/2026 に書き換えます — 単一パターンによる ISO から DMY への変換で、パターンをスクリプトに差し込む前に視覚的に確認できます。
あらゆる regex 作業 — パターンの構築、デバッグ、書き換え — の高速レーンとして本テスターを利用してください。すべてローカルで動作し、何もログ取りされず、regex エンジンはあなたのブラウザに同梱されているものなので、振る舞いは本番コードが実行時に見るものと一致します。