URLパーサー

Q: URLが無効と判定されるのはなぜですか。

パーサーにはスキーム付きの絶対URLが必要です。`example.com/page` は相対参照なので、`https://example.com/page` と書いてください。

任意のURLを、スキーム、認証情報、ホスト、ポート、パスセグメント、クエリパラメーター、フラグメントに分解し、デコード済みの値とJSON出力を表示します。ブラウザ内で動作します。

URL アドレス

スキーム（プロトコル）	https:
ユーザー名	user
パスワード	pass
ホスト名	shop.example.com
ポート	8080
パス	/products/shoes
パスのセグメント（デコード済み）	1. products 2. shoes
クエリ文字列	?color=red&size=42
フラグメント	#reviews
オリジン	https://shop.example.com:8080
正規化された URL	https://user:pass@shop.example.com:8080/products/shoes?color=red&size=42#reviews

クエリパラメーター（2）

キー	デコード後の値
color	red
size	42

JSON

{
  "protocol": "https:",
  "username": "user",
  "password": "pass",
  "hostname": "shop.example.com",
  "port": "8080",
  "pathname": "/products/shoes",
  "search": "?color=red&size=42",
  "hash": "#reviews",
  "origin": "https://shop.example.com:8080",
  "params": {
    "color": "red",
    "size": "42"
  }
}

URLパーサーとは？

URLパーサーは、URLを構成要素（スキーム、ユーザー名、パスワード、ホスト名、ポート、パス、パスセグメント、クエリ文字列、個別のクエリパラメーター、フラグメント）に分解し、オリジンと正規化されたURLも表示します。パーセントエンコードされた値はデコードされ、国際化ホスト名はpunycodeとUnicodeの両方で表示され、繰り返されるパラメーターもそのまま保持されます。

URLパーサーの使い方

https://user:pw@example.com:8080/a/b%20c?x=1&y=two#h のような絶対URLを貼り付けます。
構成要素の表を確認します。ポートが指定されていない場合、ポートの行には既定のポートが表示されます。
クエリパラメーターの表で、デコードされた各キーと値を確認します。
JSONブロックをコピーして、解析結果をコードやテストで使います。

例

入力

https://user:pw@example.com:8080/a/b%20c?x=1&y=two#h

出力

host example.com · port 8080 · path segments: 1. a, 2. b c · query ?x=1&y=two (x = 1, y = two) · fragment #h

URLパーサーを使うべき場面

トラッキングリンク、OAuthのリダイレクトURL、署名付きURL、パラメーターの多いAPI呼び出しのデバッグに使います。解析できるのは絶対URLのみで、相対パスの場合は先に https://example.com などのベースを付けてください。URLにアクセスはしません。

URLパーサーの仕組み

URLはブラウザ内蔵のWHATWG URL クラス（ブラウザがナビゲーションに使うのと同じパーサー）で解析されるため、結果は実際のブラウザの動作と一致します（ホストの小文字化、ドットセグメントの解決、IDNのpunycode化）。クエリパラメーターは URLSearchParams から取得され、+ はスペースに、パーセントエスケープはUTF-8としてデコードされます。パスセグメントは decodeURIComponent でデコードされ、不正なエスケープが含まれる場合はそのまま残されます。