JS 获取 URL 参数 - Javascript

在 web 开发中，经常需要获取 URL 中的参数。Javascript 提供了多种方法来获取 URL 参数，本文将介绍两种常用的方式。

方法一：使用正则表达式来获取 URL 参数

我们可以通过正则表达式来匹配 URL 中的参数，并返回所需的参数值。

function getUrlParam(paramName) {
    const reg = new RegExp("(^|&)" + paramName + "=([^&]*)(&|$)", "i");
    const r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURI(r[2]);
    return null;
}

// 示例
const parameter = getUrlParam("name"); // 获取 URL 中名为 name 的参数
console.log(parameter); // 输出参数值

上述代码中，通过正则表达式 (^\|&) + paramName + "=(^&\|)" + 来匹配 URL 中的参数名和参数值。如果存在该参数，就返回其参数值，否则返回 null。

方法二：将 URL 参数转化为对象来获取参数

这种方法将 URL 参数转化为 JSON 对象，通过对象属性来获取参数。

function getUrlParams() {
    const params = {};
    const url = window.location.search;
    const arr = url.split("?");

    if (arr.length > 1) {
        const paramsArr = arr[1].split("&");
        paramsArr.forEach(param => {
            const keyValue = param.split("=");
            params[keyValue[0]] = decodeURI(keyValue[1]);
        });
    }

    return params;
}

// 示例
const parameters = getUrlParams(); // 获取所有 URL 参数
console.log(parameters.name); // 输出名为 name 的参数值

上述代码中，我们先将 URL 参数部分提取出来，再将其转换为数组。之后遍历数组，通过 split() 函数将参数名与参数值分离，并将其赋值给对象的属性。最后，返回该对象，可以通过参数名来获取其对应的参数值。

总结

以上两种方法都可以用来获取 URL 参数，但它们各有优点和缺点。方法一可以快速匹配单个指定参数，但不能获取所有参数。方法二可以获取所有参数，但不能快速匹配单个指定参数。

所以，我们可以根据需要选择使用其中的一种方式或者进行改进，以满足实际需求。