获取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. NBIOT实现UDP协议的发送和接收(包含软件升级)

    源码下载: nbiot_module程序(java netbean) -> 提取码 UdpServer程序(C# vs2010) -> 提取码 QQ:505645074 前提条件:开NB卡 ...

  2. ZigBee究竟是什么?有什么用?

    ZigBee技术是一种近距离.低复杂度.低功耗.低速率.低成本的双向无线通讯技术.主要用于距离短.功耗低且传输速率不高的各种电子设备之间进行数据传输以及典型的有周期性数据.间歇性数据和低反应时间数据传 ...

  3. 安装教程-VMware 12 安装企业级 CentOS 7.6

    企业级 CentOS 7.6 系统的安装 1.实验描述 在虚拟机中,手动安装 CentOS 7.6 操作系统,为学习 Linux 提供平台,因此,有的参数有些差异,请勿较真. 2.实验环境 物理机系统 ...

  4. POJ 1321 棋盘问题 题解

    棋盘问题 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 70224 Accepted: 33254 Description 在一 ...

  5. git的使用(二)

    GITHUB 简介 github可以是全世界最大的同性交友网站,其实就是和百度云一个性质. gitHub于2008年4月10日正式上线,除了git代码仓库托管及基本的 Web管理界面以外,还提供了订阅 ...

  6. LNK1104 无法打开文件“xxx.lib”

    尝试解决方法: 1.找到这个库,把这个库移动到特定的文件夹下,在属性中添加这个库: 具体来说:打开VS项目->项目属性->配置属性->C/C+±>附加包含目录->编辑-& ...

  7. 【使用篇二】SpringBoot整合mybatis(7)

    说明:使用SpringBoot+Mybatis+Jsp实现简单的用户增删查改 #用户表 DROP TABLE IF EXISTS `user`; CREATE TABLE `user` ( `) NO ...

  8. C++ vector初始化方式

    C++的初始化方法很多,各种初始化方法有一些不同. (1): vector<int> ilist1; 默认初始化,vector为空, size为0,表明容器中没有元素,而且 capacit ...

  9. 利用Tengine在树莓派上跑深度学习网络

    树莓派是国内比较流行的一款卡片式计算机,但是受限于其硬件配置,用树莓派玩深度学习似乎有些艰难.最近OPENAI为嵌入式设备推出了一款AI框架Tengine,其对于配置的要求相比传统框架降低了很多,我尝 ...

  10. 数据结构——顺序队列(sequence queue)

    /* sequenceQueue.c */ /* 顺序队列 */ #include <stdio.h> #include <stdlib.h> #include <std ...