在JavaScript中获取请求的URL参数[正则]

获取请求的URL参数在Web开发中非常常见。JavaScript提供了多种方式来获取URL参数，其中使用正则表达式进行匹配是一种非常常用的方式，下面是完整的攻略。

1.使用正则表达式进行URL参数提取

以下正则表达式用于匹配URL参数：

let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
let r = window.location.search.substr(1).match(reg)
if (r != null) {
    return unescape(r[2])
}
return null

其中，window.location.search将返回URL问号以及之后的所有字符串，例如：?key1=value1&key2=value2&key3=value3。使用substr(1)方法将问号去掉，得到key1=value1&key2=value2&key3=value3。通过正则表达式匹配字符串中的目标参数，从而获取参数值。

如下代码示例说明了如何使用上述正则表达式获取key1参数的值：

function getParameter(name) {
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
    let r = window.location.search.substr(1).match(reg)
    if (r != null) {
        return unescape(r[2])
    }
    return null
}

let key1Value = getParameter('key1')
console.log(key1Value)

在访问带有?key1=value1&key2=value2&key3=value3的URL时，上述代码输出value1。

2.解析URL参数对象

除了使用正则表达式获取单个参数值外，我们也可以使用JavaScript内置的URLSearchParams对象来解析URL参数。使用该对象，我们可以比较方便地获取URL中的所有参数值。

如下代码示例迭代显示所有参数名称以及参数值：

let urlSearchParams = new URLSearchParams(window.location.search)
for (let [key, value] of urlSearchParams) {
    console.log(key, value)
}

在访问带有?key1=value1&key2=value2&key3=value3的URL时，上述代码会输出：

key1 value1
key2 value2
key3 value3

3.总结

本攻略简要介绍了使用正则表达式以及URLSearchParams对象获取URL参数的方式。其中，正则表达式方法适用于提取单个参数值，而URLSearchParams对象方便地解析所有参数值。在使用其中一个方式时，请注意对值进行解码(unescape)以防编码问题。