HTMLツール

無料 URLPatternテスター

手動解析不要の名前付きグループ、ワイルドカード、正規表現マッチングによるURLパターンテストをURLPattern APIで行います。

クイックリファレンス

カテゴリ: HTMLツール注意: URLPatternのブラウザサポートはChromiumとSafari（15.4+）では強力ですが、Firefoxのサポートはバージョン115でのみ到着し、一部のサーバーサイドランタイムではAPIはまだ実験的です。古いブラウザやレガシーNode.jsバージョンをターゲットにする本番アプリには、urlpattern-polyfill npmパッケージを含めてください。出力: 手動解析不要の名前付きグループ、ワイルドカード、正規表現マッチングによるURLパターンテストをURLPattern APIで行います。

こちらもお試しくださいARIAライブリージョンジェネレーター CSP ハッシュジェネレーター Customizable Select Generator

ツールを使う入力は手元で処理

ツールを読み込み中...

URLPatternテスターとは

URLPatternは、名前付きグループ、ワイルドカード、正規表現制約を使用した宣言型URLマッチングを提供する標準ブラウザAPIです。URLルーティングのためにエラーが発生しやすい正規表現パターンや手動のパス解析を書く代わりに、開発者はnew URLPattern('/books/:id')を使用してURLにマッチし、読み取り可能で保守可能な方法でパラメータを抽出できます。このAPIは、プロトコル、ホスト名、ポート、パス名、検索、ハッシュのすべてのURLコンポーネントをサポートし、URLエンコーディングを自動的に処理します。

クイックアンサー

URLPatternは、名前付きグループ、ワイルドカード、正規表現制約を使用した宣言型URLマッチングを提供します。正規表現や手動のパス解析は不要です。/books/:id構文を使用してURLにマッチし、パラメータを抽出します。Chrome 95+、Edge 95+、Safari 15.4+、Firefox 115+でネイティブ利用可能。Deno、Cloudflare Workers、Node.js 21+でもサポートされています。

Last updated: 2026-05-31

制限事項

URLPatternのブラウザサポートはChromiumとSafari（15.4+）では強力ですが、Firefoxのサポートはバージョン115でのみ到着し、一部のサーバーサイドランタイムではAPIはまだ実験的です。古いブラウザやレガシーNode.jsバージョンをターゲットにする本番アプリには、urlpattern-polyfill npmパッケージを含めてください。
URLPatternのマッチングは単純な文字列操作よりも低速です。1秒間に数千のURLを処理するタイトなループでの高頻度URLマッチングには、コンパイル済み正規表現またはトライベースのルーターの方がパフォーマンスが優れています。URLPatternは生のスループットよりも可読性を優先します。
URLPatternはリバースマッチングをサポートしていません。パターンとパラメータからURLを生成することはできません。URLがマッチするかどうかのテストと名前付きグループ値の抽出のみを行います。双方向のURL処理には、path-to-regexpのようなライブラリがマッチングとURL生成の両方を提供します。

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

使い方

名前付きグループには:param（例：/blog/:slug）、ワイルドカードマッチには*（例：/api/*）、オプションセグメントには/:param?を使用してURLPatternパターン文字列を入力します。また、/users/:id(\d+)のように正規表現制約を追加することもできます。
パターンと照合する1つ以上のテストURLを追加します。各テストURLは独立して評価されるため、1つのセッションで複数のパス、クエリ文字列、エッジケースを確認できます。
ライブマッチ結果を確認します。各テストURLについて、マッチしたかどうか、抽出された名前付きグループ値、マッチしなかったオプショングループでnullまたはundefinedを返したグループが表示されます。
URLPattern APIを使用した生成済みJavaScriptコードをコピーします。特定のパターンとテストURLが含まれており、マッチチェックとパラメータ抽出ロジックがプロジェクトにそのまま使える状態で含まれています。

主な用途

シングルページアプリケーションで、脆弱な正規表現解析の代わりにURLPatternを使用してクライアントサイドルーティングを実装します。名前付きグループによりルートパラメータが自己文書化され、自動的にURLデコードされます。
サービスワーカーのfetchハンドラで着信URL構造を検証します。既知のルートパターンに対してリクエストURLをマッチングし、選択的なキャッシュとレスポンスロジックのためのパラメータを抽出します。
サイト移行中にURL再構築をテストします。古いURLパターンが期待されるパラメータにマッチし、新しいリダイレクトルールが本番環境にデプロイする前に正しいパスセグメントをキャプチャすることを確認します。

用途

使用例

例

URLPatternを使用したSPAルートマッチング

バニラJavaScript SPAで、/blog/:slugや/products/:category/:idのようなルートを定義します。URLPatternを使用して、着信するhistory.pushStateのURLにマッチさせます。/blog/:slugパターンは/blog/hello-worldにマッチし、名前付きグループとして{slug: 'hello-world'}を抽出します。スラッシュでの分割や脆弱な正規表現の作成はもう必要ありません。URLPatternはオプショングループ、ワイルドカード、正規表現制約を宣言的に処理します。

例

サービスワーカーのキャッシュルーティング

サービスワーカーが/api/posts/:idのAPIレスポンスをキャッシュし、/api/admin/*のパスは除外する必要があります。pathname: '/api/posts/:id'を持つURLPatternを作成し、fetchイベントハンドラで使用して一致するリクエストを選択的にキャッシュします。名前付きグループにより、'post-' + result.pathname.groups.idのようなキャッシュキーを簡単に構築できます。

よくあるミス

URLPatternは文字列コンストラクタを使用する場合、デフォルトでオリジンを含む完全なURLに対してマッチすることを忘れる。パス名のみにマッチを制限するにはnew URLPattern({ pathname: '/books/:id' })を使用するか、完全URLマッチングにはパターン文字列に期待されるオリジンを含めてください。
URLPattern.exec()のグループ値が常に文字列であると思い込む。マッチしなかったオプショングループはundefinedを返し、ワイルドカードグループは長さゼロのマッチで空文字列を返します。アプリケーションロジックで抽出したグループ値を使用する前に、必ずundefinedを確認してください。
単純な文字列メソッドで十分な場合にURLPatternを使用する。既知の静的パスに対する基本的なプレフィックスまたはサフィックスのチェックでは、URLPatternは不必要な複雑さとパフォーマンスコストを追加します。パターン化されていないURLチェックには、.startsWith()、.includes()、または完全な文字列比較を使用してください。

検証

ブラウザコンソールを開き、new URLPattern({ pathname: '/test/:id' }).exec('https://example.com/test/123')を実行します。結果オブジェクトにpathname.groups.idが値'123'で含まれ、結果がnullでないことを確認します。
エッジケースをテストします。マッチしないURLはnullを返し（エラーではない）、/:id?のようなオプショングループはセグメントが省略された場合にundefinedを返し、ワイルドカードパターン/files/*は残りのパスをresult.pathname.groups[0]を介してアクセス可能なワイルドカードグループにキャプチャします。

FAQ

URLPatternテスターのFAQ

URLPatternはURLマッチングのための正規表現とどう違いますか？

URLPatternは宣言的で自己文書化されています。/users/:idは即座に読み取れますが、/^\\/users\$\\d+\$$/は解析が必要です。URLPatternはURLエンコーディングを自動的に処理し（パスセグメント内の%2F）、読み取り可能なパラメータ抽出のための名前付きグループをサポートし、オプショングループ、ワイルドカード、正規表現制約を正しく処理します。また、ブラウザ、Deno、Cloudflare Workers環境間で一貫したAPIを提供します。

URLPatternはクエリ文字列やハッシュフラグメントにマッチできますか？

はい。URLPatternはsearch（クエリ文字列）やhashを含むすべてのURLコンポーネントに対するマッチングをサポートしています。new URLPattern({ pathname: '/search', search: 'q=:query' })を使用して、クエリパラメータを名前で抽出します。searchコンポーネントのワイルドカードを使用すると、追加のパラメータにもマッチします：'q=:query&*'はqパラメータ以降の任意の追加クエリパラメータにマッチします。

URLPatternはNode.jsやサーバーサイドランタイムで動作しますか？

URLPatternはChrome 95+、Edge 95+、Safari 15.4+、Firefox 115+でネイティブに利用できます。サーバーサイドでは、URLPatternはDenoとCloudflare Workersに組み込まれています。Node.jsでは、urlpattern-polyfill npmパッケージを介して利用できるか、Node.js 21+で--experimental-urlフラグを使用してネイティブに利用できます。BunはフラグやポリフィルなしでURLPatternをネイティブサポートしています。

URLPatternの名前付きグループ内で正規表現を使用できますか？

はい。URLPatternは括弧で囲まれたパターンを使用した名前付きグループ内の正規表現制約をサポートしています。/users/:id(\d+)は数値IDのみにマッチし、/posts/:slug([a-z0-9-]+)は小文字のスラッグ文字列にマッチします。正規表現制約を使用すると、後処理の検証なしでマッチする値を絞り込めます。正規表現はマッチしたパスセグメントに適用され、完全なURLには適用されません。