两种方法获取url参数((split replace+正则)
一.首先我们使用简单的split进行获取
1.因为有详细的注解,且题目经典,相信大家都有做过,我不过多赘述,把重心放到第二种方法上、代码如下所示:
// An highlighted block
function queryUrlParams(){
// // this-->当前url
let paramsStr = this.split('?')[1];
'name=erYa&age=18#index'
let params = paramsStr.split('#');
// ['name=erYa&age=18','index']
let paramsAry = params[0].split('&');
// // ['name=erYa','age=18']
let obj = {};
for(var i =0;i<paramsAry.length;i++){
let item = paramsAry[i]; // 代表数组的每一项 'name=erYa'
let itemAry = item.split('='); // ['name','erYa']
obj[itemAry[0]] = itemAry[1];
}
obj['hash'] = params[1];
return obj;
/}
String.prototype.queryUrlParams = queryUrlParams;
console.log(url.queryUrlParams());
}
二.replace+正则获取
大家可以先试着做一遍
// An highlighted block
let url = 'https:www.baidu.com:5500?name=erYa&age=18#index';
function queryUrlParams() {
// this--》url
let reg = /([^?=&#]+)=([^?=&#]+)/g;
let obj = {};
// 单纯利用replace进行捕获,不利用return的特点
this.replace(reg,(...ary)=>{
// 从这里给当前obj新增键值对
let [,key,value] = ary; // 从传递过来的参数中结构出我们想要的值
obj[key] = value; // 给obj新增键值对
});
this.replace(/#([^?=&#]+)/,(...ary)=>{
obj['hash'] = ary[1];
})
return obj;
}
String.prototype.queryUrlParams = queryUrlParams;
console.log(url.queryUrlParams());
对比上一种方法,我们发现,还是这种更见方便,相对于也更加高级一点,那么我们开始讲解,首先我们要知道三句话,即:
1.首先拿reg和time进行匹配捕获,能匹配到几次就会把传递的函数执行几次(而且是匹配一次就执行一次)
2.不仅把方法执行,而且replace还给当前函数传递了实参信息(和exec捕获的内容一致的信息:大正则匹配的内容,小分组匹配的信息…)
3.在函数中我们返回的是啥,就把当前大正则匹配的内容替换成啥
首先取参函数中定义了一个正则表达式,用于从url中截取我们所需要的值,/([?=&#]+)=([?=&#]+)/g 看似难懂,但是如果详细拆分使非常容易理解的,我们从()开始说,在正则表达式中,(),有三种功能,
1、提高匹配的优先级
2、分组引用
3、分组捕获
我们主要使用了第三种,分组捕获,利用这个功能把每个()当成一个小分组,也就是说有几个括号就有几个小分组,小分组们会存放在正则表达式返回值里大正则的后面,[]里放^代表除了的意思,在这个括号里放什么就不允许什么出现,也就会在匹配时忽略这些字符,后面的g代表全局匹配,会将字符串中符合的条件进行全部匹配。
3.下面我们来看一下这个replace,如果阅读了我上面加粗的三句话,就不难理解,replace在进行匹配时会将结果传递给右侧的函数,右侧函数利用拓展收缩运算符将ary从一个参数序列变成一个数组,利用解构赋值,将第一个大正则利用,方式占位进行舍弃,把第二位的name和erya这个值拿到手,并用事先定义好的obj对象以其属性值和属性名的方式为其增加键值对。
最后把之前剩下的#index参数以同样的方式取出来,当成属性值放到属性名hash里,最终返回这个包含所有想要的参数的对象。