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 中的 # 片段会发送给服务器吗？
不会。# 之后的内容（称为 fragment 或 hash）只在浏览器本地处理，不会包含在 HTTP 请求中发送给服务器。它通常用于页面内锚点导航（滚动到指定位置），在 SPA（单页应用）中也用于客户端路由（如 React Router 的 hash 模式）。
查询字符串（Query String）如何正确解析？
查询字符串格式为 key=value&key2=value2，值中的特殊字符需要 URL 编码。JavaScript 中使用 new URLSearchParams(url.search) 解析，Python 使用 urllib.parse.parse_qs()，Go 使用 url.ParseQuery()。注意：同一个 key 可能出现多次（如 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 相对于当前页面的 URL（如 ./page、/api/data、../assets/img.png），需要结合基础 URL 才能解析为完整 URL。JavaScript 中：new URL('./page', 'https://example.com/app/') 结果为 https://example.com/app/page。