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

时间:2023-12-23 18:29:31

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

方法一:原生js(假设已经获得了Url地址)

 var url = 'https://gitbook.cn/gitchat/geekbooks?tag=JavaScript&name=pwwu&age=24';
var temp1 = url.split('?');
var pram = temp1[];
var keyValue = pram.split('&');
var obj = {};
for (var i = ; i<keyValue.length; i++){
var item = keyValue[i].split('=');
var key = item[];
var value = item[];
obj[key] = value;
}
console.log(url);
console.log(temp1); // ['https://gitbook.cn/gitchat/geekbooks','tag=JavaScript&name=pwwu&age=24']
console.log(pram); // tag=JavaScript&name=pwwu&age=24
console.log(keyValue); // ['tag=JavaScript','name=pwwu','age=24']
console.log(obj); // {tag:'JavaScript',name:'pwwu',age:'24'}

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

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

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

方法三 使用正则表达式

 //获取url中的参数方法
function getUrlParam(name) {
//构造一个含有目标参数的正则表达式对象
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
//匹配目标参数
var r = window.location.search.substr().match(reg);
//返回参数
if (r != null) {
return unescape(r[]);
} else {
return null;
}
}
var ABC = getUrlParam();
console.log(ABC);

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

HDC.Cloud 华为开发者大会2020 即将于2020年2月11日-12日在深圳举办,是一线开发者学习实践鲲鹏通用计算、昇腾AI计算、数据库、区块链、云原生、5G等ICT开放能力的最佳舞台。

欢迎报名参会

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