来截取地址栏参数
前端框架中,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 啦;