https://alice:p4ss@api.example.com:8443/v2/users?role=admin&page=1#section-2

from urllib.parse import urlparse, urlunparse

url = "https://alice:p4ss@api.example.com:8443/v2/users?role=admin&page=1#section-2"
parsed = urlparse(url)

print(f"scheme:   {parsed.scheme}")      # https
print(f"netloc:   {parsed.netloc}")      # alice:p4ss@api.example.com:8443
print(f"hostname: {parsed.hostname}")    # api.example.com
print(f"port:     {parsed.port}")        # 8443
print(f"username: {parsed.username}")    # alice
print(f"password: {parsed.password}")    # p4ss
print(f"path:     {parsed.path}")        # /v2/users
print(f"query:    {parsed.query}")       # role=admin&page=1
print(f"fragment: {parsed.fragment}")    # section-2

# 重新构建 URL
new_url = urlunparse((
    'https',                    # scheme
    'api.example.com',          # netloc
    '/v3/users',                # path
    '',                         # params (路径参数)
    'page=2&limit=20',          # query
    'top'                       # fragment
))
print(new_url)  # https://api.example.com/v3/users?page=2&limit=20#top

# data URL 示例
data_url = "data:text/html,<h1>Hello</h1>"
data_url_b64 = "data:text/html;base64,PGgxPkhlbGxvPC9oMT4="

# 在 JavaScript 中
# window.location = "mailto:alice@example.com?subject=Hello"

from urllib.parse import quote, unquote, urlencode

# 编码路径
path = "/文档/报告 2024.pdf"
encoded_path = quote(path, safe='/')
print(encoded_path)  # /%E6%96%87%E6%A1%A3/%E6%8A%A5%E5%91%8A%202024.pdf

# 解码
print(unquote(encoded_path))  # /文档/报告 2024.pdf

# 编码查询参数
params = {
    "q": "HTTP 协议",
    "lang": "zh",
    "page": "1"
}
query_string = urlencode(params, quote_via=quote)
print(query_string)
# q=HTTP%20%E5%8D%8F%E8%AE%AE&lang=zh&page=1

// JavaScript URL 编码
const keyword = "HTTP 协议 & 安全";

// encodeURI — 编码整个 URL（不编码 scheme、host 等）
console.log(encodeURI(keyword));
// HTTP%20%E5%8D%8F%E8%AE%AE%20%26%20%E5%AE%89%E5%85%A8

// encodeURIComponent — 编码 URL 组件（编码更多字符）
console.log(encodeURIComponent(keyword));
// HTTP%20%E5%8D%8F%E8%AE%AE%20%26%20%E5%AE%89%E5%85%A8

// 构建带参数的 URL
const base = "https://api.example.com/search";
const params = new URLSearchParams({ q: keyword, page: 1 });
console.log(`${base}?${params}`);
// https://api.example.com/search?q=HTTP+%E5%8D%8F%E8%AE%AE+%26+%E5%AE%89%E5%85%A8&page=1

from urllib.parse import parse_qs, urlencode

# 解析重复键参数
query = "ids=1&ids=2&ids=3&name=alice"
params = parse_qs(query, keep_blank_values=True)
print(params)
# {'ids': ['1', '2', '3'], 'name': ['alice']}

# 方括号风格
query2 = "ids[]=1&ids[]=2&filter[name]=alice&filter[age]=25"
# 这种格式需要手动解析或使用框架解析

// JavaScript URLSearchParams
const params = new URLSearchParams();
params.append('ids', '1');
params.append('ids', '2');
params.append('ids', '3');
params.set('page', '1');
params.sort();  // 可排序

console.log(params.toString()); // ids=1&ids=2&ids=3&page=1
console.log(params.getAll('ids')); // ['1', '2', '3']
console.log(params.get('page'));  // '1'

// 从当前 URL 解析
const url = new URL('https://example.com/search?q=hello&page=1');
console.log(url.searchParams.get('q'));    // 'hello'
console.log(url.searchParams.get('page')); // '1'

https://example.com/page#section-2

// 浏览器中操作 Fragment
console.log(window.location.hash); // #section-2

window.location.hash = '#section-3';  // 修改片段，不发送请求

// 监听片段变化
window.addEventListener('hashchange', (event) => {
    console.log('旧片段:', event.oldURL);
    console.log('新片段:', event.newURL);
});

<!-- 绝对 URL -->
<a href="https://example.com/page">绝对链接</a>

<!-- 相对 URL -->
<a href="page.html">同目录下的 page.html</a>
<a href="./page.html">同目录下的 page.html（显式）</a>
<a href="../other/page.html">上级目录的 other/page.html</a>
<a href="//cdn.example.com/file.js">协议相对 URL</a>

from urllib.parse import urljoin

base = "https://example.com/dir/page.html"

print(urljoin(base, "other.html"))
# https://example.com/dir/other.html

print(urljoin(base, "../other.html"))
# https://example.com/other.html

print(urljoin(base, "/root.html"))
# https://example.com/root.html

print(urljoin(base, "https://other.com/page"))
# https://other.com/page

print(urljoin(base, "//cdn.example.com/file.js"))
# https://cdn.example.com/file.js

// 构建搜索 URL 的工具函数
class SearchURLBuilder {
    constructor(base) {
        this.url = new URL(base);
    }

    query(q) { this.url.searchParams.set('q', q); return this; }
    page(p) { this.url.searchParams.set('page', p); return this; }
    limit(l) { this.url.searchParams.set('limit', l); return this; }
    sort(field, order = 'asc') {
        this.url.searchParams.set('sort', field);
        this.url.searchParams.set('order', order);
        return this;
    }
    filter(key, value) {
        this.url.searchParams.set(key, value);
        return this;
    }
    build() { return this.url.toString(); }
}

const url = new SearchURLBuilder('https://api.example.com/search')
    .query('HTTP 协议')
    .page(2)
    .limit(20)
    .sort('date', 'desc')
    .filter('lang', 'zh')
    .build();

console.log(url);
// https://api.example.com/search?q=HTTP+%E5%8D%8F%E8%AE%AE&page=2&limit=20&sort=date&order=desc&lang=zh