获取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种方法【华为云技术分享】的更多相关文章

  1. 使用JS准确获取URL网址中参数的几种方法

    记录下使用JS准确获取URL网址中参数的方法: 参考链接1. https://blog.csdn.net/Zhihua_W/article/details/54845945?utm_source=bl ...

  2. JS动态获取项目名以及获取URL地址中的参数

    在项目当中我们可能会遇到例如改变的项目名称之后,相对应的地址就需要改变,为了减少工作量,将地址当中的项目名这一块写成动态获取的,那么最关键一点就是我要先获取它,再进行操作: 知识点整理,话不多说,直接 ...

  3. 用JS解决url地址中参数乱码的问题

    var url = window.location.herf;//获取url地址 var obj = {}; //最后输出的对象 var reg = /\?/; //要匹配的正则表达式 if(url. ...

  4. 转:Web页面通过URL地址传递参数常见问题及检测方法

    Web页面即我们在浏览器中所看到的网页,在Web应用程序中,其页面往往需要进行动态切换和数据交互,页面间的数据常规传递方法有多种,本文主要介绍Web页面处理程序中常见的URL地址参数传递方法,包括概述 ...

  5. Laravel 获取 Route Parameters (路由参数) 的 5 种方法

      Laravel 获取路由参数的方式有很多,并且有个小坑,汇总如下.   假设我们设置了一个路由参数:   现在我们访问 http://test.dev/1/2   在 TestController ...

  6. js获取url地址的参数的方法

    js获取url参数值 今天说一下如何获取url参数值. 思路 通过location的search就可以获取到url中问号后面的值. 字符串过滤到问号 通过split方法分割参数集合 循环赋值 匹配对应 ...

  7. js获取URL地址的参数

    function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&] ...

  8. 大型情感剧集Selenium:6_selenium中的免密登陆与cookie操作【华为云技术分享】

    网站登录 现在各大平台在反爬虫功能上,可谓花样繁多.总结下来按照破解成功率排名,最高的是滑动解锁.其次是验证码数字.之后是一次点击对应的汉字,最后是想12306之前那种反人类的让你说那些是奶糖吧,哈哈 ...

  9. Too many open files的四种解决办法【华为云技术分享】

    [摘要] Too many open files有四种可能:一 单个进程打开文件句柄数过多,二 操作系统打开的文件句柄数过多,三 systemd对该进程进行了限制,四 inotify达到上限. 领导见 ...

随机推荐

  1. 数据库的Disk Space usage

    SQL Server占用的存储空间,包含数据库file占用的存储空间,数据库对象占用的存储空间. 一,数据库file占用的存储空间 1,使用 sys.master_files 查看数据库中各个file ...

  2. git commit之后未submit,rebase之后找不到自己代码的处理方法

    今天使用sourceTree提交代码的时候,commit之后未submit,直接rebase主分支代码,完了发现自己本地做的修改都没了,且远程没有本地分支.google之后发现有一个简单方法可以恢复到 ...

  3. JS URL 使用base64加密与解密

    JS编码方式: <script type="text/javascript"> document.write(encodeURI("http://www.w3 ...

  4. 使用for循环运算

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. UOJ#375. 【ZJOI2018】迷宫

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ375.html 题解 首先,我们可以建出一个 k 个点的自动机,第 i 个点表示当前数对 k 取模为 i- ...

  6. Mybatis解析mapper

    众所周知,接口是不能被实例化的,但是日常开发中,我们经常能直接使用dao层对象的方法,这又是为什么呢. 带着这些问题,我们看下mybatis内部做了那些操作. Mapper解析 上文我们描述了myba ...

  7. OpenSSL 结构体

    X509_STORE 头文件:x509_vfy.h 定义 typedef struct x509_store_st X509_STORE; struct x509_store_st { /* The ...

  8. 【bzoj1616】[Usaco2008 Mar]Cow Travelling游荡的奶牛 bfs

    题目描述 奶牛们在被划分成N行M列(2 <= N <= 100; 2 <= M <= 100)的草地上游走,试图找到整块草地中最美味的牧草.Farmer John在某个时刻看见 ...

  9. 修改ES使用root用户运行

    默认ES不允许使用root用户运行,如果使用root会报如下图的错误: ,通常建议创建elsearch用户并使用该用户运行ES.但如果必须使用root用户时,按如下设置即可: 1.启动是使用如下命令 ...

  10. Cocos2d-x 屏幕适配新解(比较全面比较详细)

    本文出自 [无间落叶]原文地址:http://blog.leafsoar.com/archives/2013/05-10-19.html 为了适应移动终端的各种分辨率大小,各种屏幕宽高比,在 coco ...