获取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种,后续会不断补充。
HDC.Cloud 华为开发者大会2020 即将于2020年2月11日-12日在深圳举办,是一线开发者学习实践鲲鹏通用计算、昇腾AI计算、数据库、区块链、云原生、5G等ICT开放能力的最佳舞台。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战