使用JavaScript获取当前URL的多种方式

https://username:password@sub.example.com:8080/path/to/page?query=1&param=2#section1
|_____| |_____________| |________________| |____| |_________| |____________| |______|
   |           |               |             |        |            |           |
scheme      userinfo         host          port    path         query       hash

/**
 * 示例一：使用 window.location 对象获取 URL 的各个组成部分
 * 这是最基础也是最常用的获取方式，兼容性极佳，适用于所有现代和旧版浏览器
 */
function getLocationComponents() {
    const location = window.location;

    console.log('完整 URL:', location.href); // 完整的 URL 字符串
    console.log('协议:', location.protocol); // 'http:' 或 'https:'
    console.log('主机:', location.host); // 主机名 + 端口（如果非默认端口）
    console.log('主机名:', location.hostname); // 仅主机名
    console.log('端口:', location.port); // 端口号，如果使用默认端口则为空字符串
    console.log('路径:', location.pathname); // 路径部分，以 '/' 开头
    console.log('查询字符串:', location.search); // 查询参数部分，以 '?' 开头
    console.log('哈希:', location.hash); // 锚点部分，以 '#' 开头
}

// 调用函数输出当前页面的 URL 信息
getLocationComponents();

/**
 * 示例二：使用 URLSearchParams 解析查询参数
 * URLSearchParams 提供了标准化的接口来处理查询字符串，支持迭代、添加、删除等操作
 */
function parseQueryParams() {
    // 创建 URLSearchParams 实例
    const params = new URLSearchParams(window.location.search);

    // 遍历所有参数
    console.log('所有查询参数:');
    for (const [key, value] of params) {
        console.log(`${key}: ${value}`);
    }

    // 获取单个参数值（返回第一个匹配值）
    const name = params.get('name');
    console.log('name 参数:', name);

    // 获取所有同名参数的值（返回数组）
    const tags = params.getAll('tag');
    console.log('tags 参数:', tags);

    // 检查参数是否存在
    if (params.has('debug')) {
        console.log('启用了调试模式');
    }

    // 将所有参数转换为普通对象
    const queryParams = Object.fromEntries(params);
    console.log('查询参数对象:', queryParams);

    return queryParams;
}

// 调用函数解析当前 URL 的查询参数
const queryObject = parseQueryParams();

/**
 * 示例三：使用 URL 构造函数进行 URL 解析和操作
 * URL 构造函数支持解析任意 URL 字符串，而不仅限于当前页面的 URL
 */
function demonstrateURLConstructor() {
    // 解析当前页面的 URL
    const currentUrl = new URL(window.location.href);
    console.log('当前 URL 对象:', currentUrl);

    // 访问 URL 的各个属性（与 location 对象类似，但更规范）
    console.log('完整 URL:', currentUrl.toString()); // 或 currentUrl.href
    console.log('协议:', currentUrl.protocol);
    console.log('主机:', currentUrl.host);
    console.log('主机名:', currentUrl.hostname);
    console.log('端口:', currentUrl.port);
    console.log('路径:', currentUrl.pathname);
    console.log('查询参数:', currentUrl.search);
    console.log('哈希:', currentUrl.hash);

    // 使用 URLSearchParams 解析查询参数（与示例二相同）
    const searchParams = currentUrl.searchParams;
    console.log('查询参数（通过 URL.searchParams）:', Object.fromEntries(searchParams));

    // 动态修改 URL 的各个部分
    currentUrl.pathname = '/new/path';
    currentUrl.searchParams.set('updated', 'true');
    currentUrl.hash = '#new-section';

    console.log('修改后的 URL:', currentUrl.toString());

    // 构造一个全新的 URL
    const newUrl = new URL('https://api.example.com/v1/users');
    newUrl.searchParams.append('limit', '10');
    newUrl.searchParams.append('offset', '0');
    console.log('新构造的 API URL:', newUrl.toString());

    return currentUrl;
}

// 调用函数演示 URL 构造函数的用法
const modifiedUrl = demonstrateURLConstructor();

/**
 * 示例四：封装一个健壮的 URL 解析工具函数
 * 该函数提供类型安全的接口，并处理潜在的解析错误
 */
class UrlParser {
    /**
     * 解析给定的 URL 字符串或使用当前页面 URL
     * @param {string} [url] - 要解析的 URL 字符串，如果未提供则使用当前页面 URL
     * @returns {Object|null} 解析后的 URL 信息对象，解析失败时返回 null
     */
    static parse(url = window.location.href) {
        try {
            const parsedUrl = new URL(url);
            return {
                // 基本信息
                href: parsedUrl.href,
                origin: parsedUrl.origin, // scheme + host（不包含端口时的标准格式）
                protocol: parsedUrl.protocol.replace(':', ''), // 移除末尾的 ':'
                host: parsedUrl.host,
                hostname: parsedUrl.hostname,
                port: parsedUrl.port || this.getDefaultPort(parsedUrl.protocol),
                // 路径与资源
                pathname: parsedUrl.pathname,
                search: parsedUrl.search,
                hash: parsedUrl.hash,
                // 查询参数处理
                queryParams: Object.fromEntries(parsedUrl.searchParams),
                // 辅助方法
                hasParam: (key) => parsedUrl.searchParams.has(key),
                getParam: (key) => parsedUrl.searchParams.get(key),
                getAllParams: (key) => parsedUrl.searchParams.getAll(key),
                // 完整的 URL 对象引用
                urlObject: parsedUrl
            };
        } catch (error) {
            console.error('URL 解析失败:', error.message, 'URL:', url);
            return null;
        }
    }

    /**
     * 根据协议获取默认端口号
     * @param {string} protocol - 协议字符串（带冒号）
     * @returns {string} 默认端口号
     */
    static getDefaultPort(protocol) {
        switch (protocol) {
            case 'http:':
                return '80';
            case 'https:':
                return '443';
            case 'ftp:':
                return '21';
            case 'ws:':
                return '80';
            case 'wss:':
                return '443';
            default:
                return '';
        }
    }

    /**
     * 从查询参数中安全地提取数值类型
     * @param {string} key - 参数键名
     * @param {number} [defaultValue=0] - 默认值
     * @returns {number}
     */
    static getNumericParam(key, defaultValue = 0) {
        const param = this.parse().getParam(key);
        return param ? Number(param) || defaultValue : defaultValue;
    }

    /**
     * 从查询参数中提取布尔值
     * @param {string} key - 参数键名
     * @param {boolean} [defaultValue=false] - 默认值
     * @returns {boolean}
     */
    static getBooleanParam(key, defaultValue = false) {
        const param = this.parse().getParam(key);
        if (param === null) return defaultValue;
        return ['true', '1', 'yes', 'on'].includes(param.toLowerCase());
    }
}

// 使用示例
const currentInfo = UrlParser.parse();
if (currentInfo) {
    console.log('当前页面信息:', currentInfo);
    console.log('是否有 debug 参数:', currentInfo.hasParam('debug'));
    console.log('page 参数值:', currentInfo.getParam('page'));
    console.log('提取数值参数:', UrlParser.getNumericParam('page', 1));
    console.log('提取布尔参数:', UrlParser.getBooleanParam('debug'));
}

/**
 * 示例五：监听 SPA 中的 URL 变化
 * 在使用 History API 的单页应用中，需要监听 popstate 事件来响应 URL 变化
 */
function setupUrlChangeListener() {
    // 监听浏览器前进/后退按钮导致的 URL 变化
    window.addEventListener('popstate', function(event) {
        console.log('URL 发生变化（popstate）:', window.location.href);
        console.log('状态对象:', event.state);
        
        // 在此处执行路由逻辑，如更新视图、加载数据等
        handleRouteChange();
    });

    // 监听自定义的 URL 变化（例如通过 pushState/replaceState 触发）
    // 由于 pushState/replaceState 不会触发 popstate，需要手动 dispatch
    const originalPushState = history.pushState;
    history.pushState = function(state, title, url) {
        const result = originalPushState.apply(this, arguments);
        // 手动触发自定义事件
        window.dispatchEvent(new CustomEvent('urlchange', {
            detail: { state, title, url, type: 'push' }
        }));
        return result;
    };

    const originalReplaceState = history.replaceState;
    history.replaceState = function(state, title, url) {
        const result = originalReplaceState.apply(this, arguments);
        window.dispatchEvent(new CustomEvent('urlchange', {
            detail: { state, title, url, type: 'replace' }
        }));
        return result;
    };

    // 监听自定义的 URL 变化事件
    window.addEventListener('urlchange', function(event) {
        console.log('URL 通过 History API 修改:', event.detail.url);
        handleRouteChange();
    });

    // 初始化时处理当前路由
    function handleRouteChange() {
        const urlInfo = UrlParser.parse();
        if (!urlInfo) return;

        console.log('路由变更处理:', urlInfo.pathname, urlInfo.queryParams);

        // 根据 pathname 和 queryParams 执行相应的页面逻辑
        // 例如：渲染不同组件、更新页面标题、发送埋点等
        updateViewBasedOnRoute(urlInfo);
    }

    // 模拟路由处理逻辑
    function updateViewBasedOnRoute(info) {
        // 这里可以集成 React Router、Vue Router 或自定义路由逻辑
        switch (info.pathname) {
            case '/home':
                console.log('显示首页');
                break;
            case '/profile':
                console.log('显示用户资料页，用户ID:', info.getParam('id'));
                break;
            default:
                console.log('显示 404 页面');
        }
    }

    // 初始加载时处理当前 URL
    handleRouteChange();
}

// 启动 URL 变化监听器
setupUrlChangeListener();