获取Url地址中参数的3种方法【华为云技术分享】

获取Url的代码如下：window.location.href;

方法一：原生js（假设已经获得了Url地址）

 1 var url = 'https://gitbook.cn/gitchat/geekbooks?tag=JavaScript&name=pwwu&age=24';
 2         var temp1 = url.split('?');
 3         var pram = temp1[1];
 4         var keyValue = pram.split('&');
 5         var obj = {};
 6         for (var i = 0; i<keyValue.length; i++){
 7             var item = keyValue[i].split('=');
 8             var key = item[0];
 9             var value = item[1];
10             obj[key] = value;
11         }
12         console.log(url);
13         console.log(temp1);    //  ['https://gitbook.cn/gitchat/geekbooks','tag=JavaScript&name=pwwu&age=24']
14         console.log(pram);     //  tag=JavaScript&name=pwwu&age=24
15         console.log(keyValue); //  ['tag=JavaScript','name=pwwu','age=24']
16         console.log(obj);      //  {tag:'JavaScript',name:'pwwu',age:'24'}

总结：主要思路就是将Url用split()分割成不同的块，返回值为一个数组，一直分割到为 [‘tag=JavaScript’,‘name=pwwu’,‘age=24’]为止，
然后将该数组中的每一项以键值对的形式传进一个空对象obj（这里需要遍历数组），最后利用obj.name“点”的方式获取相应参数。

方法二 URLSearchParams()函数（记不住函数名的可以直接在浏览器里面打印）

1      var url2 = 'https://gitbook.cn/gitchat/geekbooks?tag=%E5%A4%A7%E6%95%B0%E6%8D%AE&name=gy&age=22';
2         var temp2 = url2.split('?')[1];
3         var pram2 = new URLSearchParams('?'+temp2);
4         console.log(pram2.get('tag')); // 大数据
5         console.log(pram2.get('name'));// gy
6         console.log(pram2.get('age')); // 22
7         console.log(temp2);   //tag=%E5%A4%A7%E6%95%B0%E6%8D%AE&name=gy&age=22
8   

方法三 使用正则表达式

 1 //获取url中的参数方法
 2         function getUrlParam(name) {
 3             //构造一个含有目标参数的正则表达式对象
 4             var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
 5             //匹配目标参数
 6             var r = window.location.search.substr(1).match(reg);
 7             //返回参数
 8             if (r != null) {
 9                 return unescape(r[2]);
10             } else {
11                 return null;
12             }
13         }
14         var ABC = getUrlParam();
15         console.log(ABC);
16   
17   

本次暂时介绍以上3种，后续会不断补充。