使用JavaScript匹配URL中的查询参数的实现方法

2026-03-30 22:43:01发布 2次浏览

详情描述

1. 使用URLSearchParams API（推荐）

// 获取当前URL参数
const params = new URLSearchParams(window.location.search);

// 获取特定参数
const id = params.get('id'); // 返回单个值
const name = params.get('name');

// 检查参数是否存在
if (params.has('page')) {
    const page = params.get('page');
}

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

// 转换为对象
const paramsObj = Object.fromEntries(params);

2. 使用正则表达式匹配

function getQueryParam(param) {
    const regex = new RegExp(`[?&]${param}=([^&#]*)`);
    const match = window.location.search.match(regex);
    return match ? decodeURIComponent(match[1]) : null;
}

// 使用示例
const userId = getQueryParam('userId');

3. 获取所有参数为对象

function getAllQueryParams() {
    const params = {};
    const queryString = window.location.search.substring(1);

    if (!queryString) return params;

    queryString.split('&').forEach(pair => {
        const [key, value] = pair.split('=');
        if (key) {
            params[decodeURIComponent(key)] = 
                value ? decodeURIComponent(value) : '';
        }
    });

    return params;
}

// 使用示例
const queryParams = getAllQueryParams();
console.log(queryParams.id, queryParams.name);

4. 结合URL对象使用

// 解析完整URL
const url = new URL('https://example.com/page?id=123&name=test');
const params = new URLSearchParams(url.search);

// 获取参数
console.log(params.get('id')); // "123"

// 解析相对URL（需要base）
const relativeUrl = new URL('/page?sort=desc', 'https://example.com');

5. 处理数组参数（多值参数）

function getQueryParams() {
    const params = {};
    const searchParams = new URLSearchParams(window.location.search);

    for (const [key, value] of searchParams.entries()) {
        if (params[key]) {
            // 如果已有值，转换为数组
            params[key] = Array.isArray(params[key]) 
                ? [...params[key], value]
                : [params[key], value];
        } else {
            params[key] = value;
        }
    }

    return params;
}

// 处理类似 ?category=books&category=movies 的参数

6. 完整工具函数

class QueryParams {
    static getAll() {
        const params = {};
        const searchParams = new URLSearchParams(window.location.search);

        for (const [key, value] of searchParams.entries()) {
            if (params[key]) {
                params[key] = Array.isArray(params[key]) 
                    ? [...params[key], value]
                    : [params[key], value];
            } else {
                params[key] = value;
            }
        }

        return params;
    }

    static get(key) {
        const params = new URLSearchParams(window.location.search);
        return params.get(key);
    }

    static set(key, value) {
        const params = new URLSearchParams(window.location.search);
        params.set(key, value);

        // 更新URL（不刷新页面）
        const newUrl = `${window.location.pathname}?${params.toString()}`;
        window.history.pushState({}, '', newUrl);
    }

    static remove(key) {
        const params = new URLSearchParams(window.location.search);
        params.delete(key);

        const newUrl = `${window.location.pathname}?${params.toString()}`;
        window.history.pushState({}, '', newUrl);
    }
}

// 使用示例
const allParams = QueryParams.getAll();
const token = QueryParams.get('token');
QueryParams.set('page', '2');

注意事项

URL编码/解码：使用decodeURIComponent()处理特殊字符 空值处理：参数可能没有值（如?key） 哈希部分：查询参数在?之后，#之前 安全性：对用户输入的参数进行验证和清理 浏览器兼容性：URLSearchParams支持现代浏览器，对于旧浏览器需要polyfill