URL パーサー/ protocol · host · path · query · hash
URL を構成要素（プロトコル、ホスト名、ポート、パス、クエリパラメータ、ハッシュ）にリアルタイムで分解・視覚化します。
URL
例を試す
このツールは役に立ちましたか？
コード例
JavaScript (URL API)
const url = new URL( 'https://user:[email protected]:8080' + '/v1/search?q=hello+world&page=2#results' ); url.protocol // 'https:' url.username // 'user' url.hostname // 'api.example.com' url.port // '8080' url.pathname // '/v1/search' url.search // '?q=hello+world&page=2' url.hash // '#results' // Query params url.searchParams.get('q') // 'hello world' url.searchParams.get('page') // '2' [...url.searchParams] // [['q','hello world'],['page','2']] // Modify & rebuild url.hostname = 'api2.example.com'; url.searchParams.set('page', '3'); url.toString() // rebuilt URL
Python
from urllib.parse import urlparse, parse_qs, urlencode raw = 'https://user:[email protected]:8080/v1/search?q=hello+world&page=2#results' u = urlparse(raw) u.scheme # 'https' u.netloc # 'user:[email protected]:8080' u.hostname # 'api.example.com' u.port # 8080 u.path # '/v1/search' u.query # 'q=hello+world&page=2' u.fragment # 'results' # Parse query params params = parse_qs(u.query) params['q'] # ['hello world'] params['page'] # ['2']
Go
import "net/url"
raw := "https://api.example.com:8080/search?q=hello&page=2"
u, err := url.Parse(raw)
u.Scheme // "https"
u.Host // "api.example.com:8080"
u.Hostname() // "api.example.com"
u.Port() // "8080"
u.Path // "/search"
u.RawQuery // "q=hello&page=2"
// Parse query
q := u.Query()
q.Get("q") // "hello"
q.Get("page") // "2"
// Build URL
u2 := &url.URL{
Scheme: "https",
Host: "example.com",
Path: "/api/v1",
}
u2.RawQuery = url.Values{"key": {"val"}}.Encode()Shell (curl / python)
# Extract parts with grep/sed
URL="https://api.example.com/search?q=hello&page=2"
# Protocol
echo $URL | grep -oP '^[^:]+(?=://)'
# api.example.com
# Query param with Python
python3 -c "
from urllib.parse import urlparse, parse_qs
u = urlparse('$URL')
print(parse_qs(u.query))
"
# curl: show effective URL
curl -v "$URL" 2>&1 | grep '> GET'
# httpie
http GET "$URL"よくある質問
URL はどのような部分で構成されていますか？
完全な URL の構造: scheme://username:password@hostname:port/pathname?search#hash。各部分の意味: scheme（プロトコル、例: https, ftp）、authority（ユーザー名:パスワード@ホスト名:ポート）、pathname（パス、/で始まる）、search（クエリ文字列、?で始まる）、hash（フラグメント識別子、#で始まり、サーバーには送信されない）。すべての部分が必須ではありません。
URL の # フラグメントはサーバーに送信されますか？
いいえ。ハッシュ/フラグメントはブラウザでローカルに処理され、HTTP リクエストに含まれることはありません。ページ内アンカーナビゲーション（特定の位置へのスクロール）や、SPA でのクライアントサイドルーティング（例: React Router のハッシュモード）に使用されます。
クエリ文字列はどのように正しく解析しますか？
クエリ文字列の形式: key=value&key2=value2。値の特殊文字は URL エンコードが必要です。JavaScript では new URLSearchParams(url.search)、Python では urllib.parse.parse_qs()、Go では url.ParseQuery() を使用します。注意: 同じキーが複数回出現する場合（例: tag=js&tag=python）、値は配列になります。
URL のポートはいつ省略できますか？
プロトコルのデフォルトポートを使用する場合に省略できます: HTTP のデフォルトは 80、HTTPS は 443、FTP は 21。ブラウザの URL API では、デフォルトポート使用時に url.port は空文字列を返し、url.host はデフォルト以外のポート時のみポート番号を含みます（例: example.com:8080）。
JavaScript で URL を解析するにはどうすればよいですか？
組み込みの URL API を使用します: const u = new URL('https://example.com/path?q=1#top'); u.hostname → 'example.com'; u.pathname → '/path'; u.searchParams.get('q') → '1'; u.hash → '#top'。URL API はすべてのモダンブラウザと Node.js 10+ で動作し、正規表現より信頼性が高いです。
相対 URL と絶対 URL の違いは何ですか？
絶対 URL は完全なプロトコルとホスト名を含み（https://example.com/path）、単独で解決できます。相対 URL は現在のページからの相対パス（'./page', '/api/data', '../assets/img.png'）で、完全な URL に解決するにはベース URL が必要です。JavaScript では: new URL('./page', 'https://example.com/app/') の結果は https://example.com/app/page です。