html使用正则获取url传的参数

发表于 2018-05-11 更新于 2025-04-01 分类于正则表达式

在搭建这个博客的时候，前台一开始都使用的jsp，使用了很多<% %>，比较难看，可读性也较差，后来逐渐全部换成了ajax获取数据，这时候觉得已经没必要使用jsp了。

使用jsp后缀也导致URL链接也非常丑（个人感觉），遂把所有jsp后缀改成html。刷新页面发现报错，

<%request.getParameter("xxx")%>

因为不是jsp，所以这种方法也行不通了。
但js里面有一个方法可以获取页面的URL地址

window.location 对象所包含的属性

属性	描述
hash	从井号 (#) 开始的 URL（锚）
host	主机名和当前 URL 的端口号
hostname	当前 URL 的主机名
href	完整的 URL
pathname	当前 URL 的路径部分
port	当前 URL 的端口号
protocol	当前 URL 的协议
search	从问号 (?) 开始的 URL（查询部分）

我们使用

window.location.search 来获取?之后的所有参数。

window.location.search.substr(1)

使用substr(1)来去掉 ?

reg = new RegExp("(^|&)" + name + "=([^&])(&|$)", "i");

使用正则，如下图，i表示忽略大小写

var r = window.location.search.substr(1).match(reg);

匹配之后会的r为一个数组，长度为4。第一个是整个匹配的字符串，第二个是group1，第三个是group2,第四个是group3。因为使用了捕获，如果不行使用捕获的话括号里面加个?:就可以了。如(?:^|&)。

那么r[2]就是我们想要的参数，完整函数如下

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

0%