两种方法获取url参数(split replace+正则)

两种方法获取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里，最终返回这个包含所有想要的参数的对象。
口才不精深感歉意，有问题可以在评论区交流，如果有大家觉得学到了一些，麻烦您点个关注，这对我真的非常重要!!! 感谢各位！