来截取地址栏参数

 

前端框架中，utils.js文件是用来存放自己封装工具类函数的，是一个共享的方法。（这个方法可以放在utils.js里，作为公共方法使用）

涛哥：
let access_token = this.getQueryString("access_token");

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

百度：
  getQuery (query) {
    // 创建一个含有目标参数的正则表达式对象
    const reg = new RegExp('(^|&)' + query + '=([^&]*)(&|$)')
    // 匹配目标参数
    const res = window.location.search.substr(1).match(reg) || window.location.hash.substring((window.location.hash.search(/\?/)) + 1).match(reg)
    if (res != null) {
      return decodeURIComponent(res[2]) //输出返回值！
    }
  }

---

1、正则 const reg = new RegExp(’(^|&)’ + query + ‘=([^&]*)(&|$)’)   详解：

const reg = new RegExp('(^|&)' + query + '=([^&]*)(&|$)')
//声明一个全局匹配，忽略大小写的正则 正则内容由regStr决定 g代表全局搜索，i代表忽略大小写 ignore case
1：const reg=new RegExp(regStr,"gi");
2：^name //匹配任何开头以name的字符串
3：'(^|&)' //匹配以&开头或者空白开头的字符串
4：'(^|&)' + query //匹配任何以&query开头 或者 以空白query开头的字符串
//本质上来说前面空白就是什么都没有，就是URL中某个参数
5：[^&] //匹配除了&以外的任意字符，就是一旦在出现了&，就是另外一个新的参数了，就不继续匹配
6：([^&]*) //匹配任意数量的 除了&以外的字符 如果query后面有&就停止匹配
7：(&|$) //同理，匹配任何以&结尾 或者 空白结尾的参数
8: ([^&]*)(&|$) //匹配以 & 开头之外的任意多个参数值，并且遇到&或者空白就停止
//遇到 & 说明到下一个参数了,也就是该参数在中间的情况,遇到 空白 说明没有值了,也就是该参数为最后一个参数

2、完整解释：

const reg = new RegExp('(^|&)' + query + '=([^&]*)(&|$)')
//匹配以 query= 开头或者以  query=  开头，中间为任意多个除了&以外的字符，一旦遇到& 或者空白 就停止匹配

3、使用实例：

  this.test = utils.getQuery('url')
 //通过utils工具类下封装的获取url参数方法getQuery来获取里面的参数  以url开头或者&url开头...

若地址栏URL为：abc.html?id=123&url=http://www.maidq.com
alert(utils.getQuery("url")); 
　　会弹出一个对话框：内容就是 http://www.maidq.com 
alert(utils.getQuery("id")); 
　　那么弹出的内容就是 123 啦；