url中的所有查询参数可以通过
window.location.search
字段获取,以字符串的形式返回。并有固定的格式?param1=value1¶m2=value2···
1.常规(split切割)
let url = "http://www.ft.com?name=zs&age=18"
getURLQueryParams(url)
function getURLQueryParams(url){
// 先获取参数字符串
let index = url.indexOf('?')
paramsUrl = url.slice(index + 1) // name=zs&age=18
let paramsArr = paramsUrl.split('&') // ['name=zs','age=18']
let params = {}
for(let item of paramsArr){
let temp = item.split('=')
params[temp[0]] = temp[1]
}
console.log(params) //{ name: 'zs', age: '18' }
}
2.正则匹配
let url = "http://www.ft.com?name=zs&age=18"
getURLQueryParams(url)
function getURLQueryParams(url){
//以?或者&开头
//name用[a-zA-Z_]+进行匹配
//^&表示 非&(*代表0个或多个)
//()代表分组,g代表全局(不写下面的while会死循环)
let reg = /[?&]([a-zA-Z_]+)=([^&]*)/g
let params = {}
while((results = reg.exec(url)) != null){
params[results[1]] = results[2]
}
console.log(params) //{ name: 'zs', age: '18' }
备注
正则的三种方法:test、match、exec
//从字符串 str1 中提取匹配 reg1 的内容(匹配一次)
var str1 = "abc123def";
var reg1 = /[0-9]+/;
console.log(str1.match(reg1)); //[ '123', index: 3, input: 'abc123def', groups: undefined ]
//检测 str2 中是否包含匹配 reg2 的内容
let reg2 = /^[\d]{2}$/g;
let str2 = "12";
console.log(reg2.test(str2)); //true
let reg3 = /[?&]([a-zA-Z_]+)=([^&]*)/g
let str3 = "http://www.ft.com?name=zs&age=18"
console.log(reg3.exec(str3));
/*
[
'?name=zs',
'name',
'zs',
index: 17,
input: 'http://www.ft.com?name=zs&age=18',
]
*/