获取Url地址中参数的3种方法【华为云技术分享】
获取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种方法【华为云技术分享】的更多相关文章
- 使用JS准确获取URL网址中参数的几种方法
记录下使用JS准确获取URL网址中参数的方法: 参考链接1. https://blog.csdn.net/Zhihua_W/article/details/54845945?utm_source=bl ...
- JS动态获取项目名以及获取URL地址中的参数
在项目当中我们可能会遇到例如改变的项目名称之后,相对应的地址就需要改变,为了减少工作量,将地址当中的项目名这一块写成动态获取的,那么最关键一点就是我要先获取它,再进行操作: 知识点整理,话不多说,直接 ...
- 用JS解决url地址中参数乱码的问题
var url = window.location.herf;//获取url地址 var obj = {}; //最后输出的对象 var reg = /\?/; //要匹配的正则表达式 if(url. ...
- 转:Web页面通过URL地址传递参数常见问题及检测方法
Web页面即我们在浏览器中所看到的网页,在Web应用程序中,其页面往往需要进行动态切换和数据交互,页面间的数据常规传递方法有多种,本文主要介绍Web页面处理程序中常见的URL地址参数传递方法,包括概述 ...
- Laravel 获取 Route Parameters (路由参数) 的 5 种方法
Laravel 获取路由参数的方式有很多,并且有个小坑,汇总如下. 假设我们设置了一个路由参数: 现在我们访问 http://test.dev/1/2 在 TestController ...
- js获取url地址的参数的方法
js获取url参数值 今天说一下如何获取url参数值. 思路 通过location的search就可以获取到url中问号后面的值. 字符串过滤到问号 通过split方法分割参数集合 循环赋值 匹配对应 ...
- js获取URL地址的参数
function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&] ...
- 大型情感剧集Selenium:6_selenium中的免密登陆与cookie操作【华为云技术分享】
网站登录 现在各大平台在反爬虫功能上,可谓花样繁多.总结下来按照破解成功率排名,最高的是滑动解锁.其次是验证码数字.之后是一次点击对应的汉字,最后是想12306之前那种反人类的让你说那些是奶糖吧,哈哈 ...
- Too many open files的四种解决办法【华为云技术分享】
[摘要] Too many open files有四种可能:一 单个进程打开文件句柄数过多,二 操作系统打开的文件句柄数过多,三 systemd对该进程进行了限制,四 inotify达到上限. 领导见 ...
随机推荐
- 浅谈cookie 和 session
一. cookie 定义:保存在浏览器本地上的一组组键值对 特点: 由服务器让浏览器进行设置的 浏览器保存在浏览器本地 下次访问时自动携带 应用: 登录 保存浏览习惯 简单的投票 使用cookie的原 ...
- SPC软控件提供商NWA的产品在各行业的应用(包装行业)
Northwest Analytical (NWA)是全球领先的“工业4.0”制造分析SPC软件控件提供商.产品(包含: NWA Quality Analyst , NWA Focus EMI 和 N ...
- select子句
1.order by order by 字段1 升序或者降序,字段2 升序或者降序(dsc) 默认 升序(asc) 注意:如果是分组,则应该使用对分组字段进行排序的groupby语法 group by ...
- tornado 之 RequestHandler(请求)
RequestHandler from tornado.web import ReuqestHandler 一.利用HTTP协议想服务器传递参数 提取url的特定部分 http://127.0.0.1 ...
- Unity检视面板的继承方法研究 (一)
对于检视面板 Inspector 的面板继承方式对项目来说是很有必要的, 比如一个基类, 写了一个很好看的检视面板[CustomEditor(typeof(XXX))], 可是所有子类的面板无法直接继 ...
- 接口测试 从 0 到 1,用 Jmeter 搭建 HTTP 接口自动化引擎 1.0 版本
百度网盘地址更新:https://pan.baidu.com/s/13S0WStZpwlbL15IBp_Q-bg 1.已实现功能描述 1.1 框架包含:Jenkins.Ant.Jmeter 1.2 测 ...
- LVS(二):四种工作模型
面试的时候必问这个四种工作模式,因为这几乎是企业里面必用的内容,所以一定要将其理解通透. 一.lvs-nat模式 二.LVS-DR模式(默认) 三.LVS-tun模式 四.LVS-fullnat模式 ...
- Kubernetes 集群分析查看内存,CPU
Kubernetes方式 top命令查看所有pod,nodes中内存,CPU使用情况 查看pod root @ master ➜ ~ kubectl top pod -n irm-server NAM ...
- 论文阅读笔记六十五:Enhanced Deep Residual Networks for Single Image Super-Resolution(CVPR2017)
论文原址:https://arxiv.org/abs/1707.02921 代码: https://github.com/LimBee/NTIRE2017 摘要 以DNN进行超分辨的研究比较流行,其中 ...
- Spring Cloud微服务安全实战_4-3_订单微服务&价格微服务
实现一个场景: 订单微服务: POM: <?xml version="1.0" encoding="UTF-8"?> <project xml ...