或许为了自身写,或许为了知己写!

浏览器 Url 参数转化为对象

项目需求:

教师端,题库列表界面需要传入 n 个参数,后续还有可能新增参数。由于是旧项目后端在 url 路由设置参数,后续开发也不方便。因此,由前端自定义传参接收参数。

使用一般方式获取浏览器路有参数,比如:

1
2
3
4
5
6
7
var search = window.location.search;

if(search.indexOf('?') != -1) {
var val = search.split('?')[1];
val = val.split('&').slice(-1)[0];
val = val.split('=')[1];
}

上述方式单独获取具体参数可以使用,如果获取多个参数就得考虑使用正则或者封装公共方法。

如何获取多个浏览器 url 参数?

下面是自己编写的方法,把浏览器参数存入对象中,以键值对的方式存在对象中。

步骤:

  • 获取浏览器参数,使用 window.location.search

  • 使用 split 切割参数取下标为 1 的数据。

  • 声明一个全局对象,保存参数数据。

  • 使用 split 切割 & 符号。

  • 循环遍历上一步骤的数组,使用 split 切割数组每项中的数据,以 = 为切割点。

  • 设置每项的数据下标 0 为对象的键名,1 为对象的键值。

  • 循环结束后,返回该对象。

完整代码:

1
2
3
4
5
6
7
8
9
10
11
12
13

function getUrlParams(url) {
let obj ={}
if(url.indexOf('?') != -1) {
url = url.split('?')[1]
url = url.split('&')
for(let i=0; i<url.length; i++) {
let v = url[i].split('=')
obj[v[0]] = v[1]
}
}
return obj;
}
———— / END / ————
0%