JavaScript获取URL参数的几种方法

前言

在前端开发中，处理URL参数是一个常见的任务，尤其是在没有框架支持的情况下。虽然许多框架提供了方便的方法来获取URL参数，但有时我们需要依赖原生JavaScript来完成这个任务。这也是面试中经常出现的问题之一。今天让我们一起来探讨如何利用原生JavaScript来获取URL参数值。
 

获取方法总结

原生JS获取URL链接参数的方法有好几种，我们一起来学习一下常见的几种。

1.使用正则表达式

2.利用a标签内置方法

3.利用split分割方法

4.使用URLSearchParams方法

具体实现

方法一: 正则表达式

function queryURLParams(url, paramName) {
    // 正则表达式模式，用于匹配URL中的参数部分。正则表达式的含义是匹配不包含 ?、&、= 的字符作为参数名，之后是等号和不包含 & 的字符作为参数值
    let pattern = /([^?&=]+)=([^&]+)/g;
    let params = {};
    
    // match用于存储正则匹配的结果
    let match;
    // while 循环和正则表达式 exec 方法来迭代匹配URL中的参数
    while ((match = pattern.exec(url)) !== null) {
        // 在字符串url中循环匹配pattern，并对每个匹配项进行解码操作，将解码后的键和值分别存储在key和value变量中
        let key = decodeURIComponent(match[1]);
        let value = decodeURIComponent(match[2]);
        
        if (params[key]) {
            if (Array.isArray(params[key])) {
                params[key].push(value);
            } else {
                params[key] = [params[key], value];
            }
        } else {
            // 参数名在 params 对象中不存在，将该参数名和对应的值添加到 params 对象中
            params[key] = value;
        }
    }
    
    if (!paramName) {
        // 没有传入参数名称, 返回含有所有参数的对象params
        return params;
    } else {
        if (params[paramName]) {
            return params[paramName];
        } else {
            return '';
        }
    }
}

let url = "http://www.baidu.co