2021年最新获取url参数的方法,用正则就落后啦
前言:相信大家对获取浏览器参数都很熟悉,第一反应是使用正则表达式去对浏览器的参数进行切割获取,然而浏览器已经提供了一个URLSearchParams这个接口给我们去操作URL的查询字符串
使用正则表达式获取url
温故而知新,先上一下我们常规使用正则表达式去获取url参数的代码
function getParams(url, params){var res = new RegExp("(?:&|/?)" + params + "=([^&$]+)").exec(url);return res ? res[1] : '';
}// url: xx.com?id=2&isShare=true
const id = getParams(window.location.search, 'id')console.log(id) // 2
复制代码
然而,现在再也不用正则这么复杂去获取浏览器的查询参数啦,浏览器给我们直接提供了一个URLSearchParams接口,让我们可以对查询参数有很大的操作空间,而且比起之前使用正则,更加简洁直接
关于URLSearchParams方法
代码实现
首先把怎样使用URLSearchParams方法实现获取url参数的代码呈上
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());console.log(params) // {id: '2', isShare: 'true'}
console.log(params.id) // 2
复制代码
是不是超级简单,只需要以url作为参数传入,并且创建URLSearchParams的一个实例对象,然后调用entries()这个方法,返回一个迭代协议iterator,该协议支持可以遍历所有支持健/值对的列表
此时还需要通过Object.fromEntries()这个方法去把该健/值对的列表,然后我们就可以愉快地使用获取到的参数啦
URLSearchParams的兼容性
搜了一下URLSearchParams的兼容性查询,详情请点击
IE真的是万恶之源,其他现代浏览器的兼容性都杠杠的,如果是不需要兼容IE的项目,可以放心食用
如果实在要兼容IE,也不要怕,可以使用url-search-params-polyfill这个插件去使用啦
安装方式:
npm install url-search-params-polyfill --save
复制代码
使用方式:
const params = new URLSearchParams("id=2&isShare=true");
复制代码
最后
如果你觉得此文对你有一丁点帮助,点个赞。或者可以加入我的开发交流群:1025263163相互学习,我们会有专业的技术答疑解惑
如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点star: https://gitee.com/ZhongBangKeJi/CRMEB不胜感激 !
2021年最新获取url参数的方法,用正则就落后啦相关推荐
- 使用jquery获取url以及jquery获取url参数的方法
使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作1.jquery获取url很简单,代码如下1.window.location.href;其实只是用到了javascri ...
- ajax动态获取url参数值,获取URL参数的方法
一.URL:统一资源定位符 1.URL组成 完整的URL由这几个部分构成: scheme://host:port/path?query#fragment 名词解释: scheme:通信协议.常用的ht ...
- js 获取url参数的方法
浏览器提供了一个新的接口来获取 url参数------------- URLSearchParams // 示例 https://www.baidu.com?id=2&isCheck=2 le ...
- php获取url参数的方法,php获取url参数方法总结
这篇文章主要介绍了php获取url参数方法,实例总结了利用parse_url()函数解析URL的方法,需要的朋友可以参考下 本文实例讲述了php获取url参数方法.分享给大家供大家参考.具体如下: 在 ...
- H5客户端获取Url参数的方法
一,window.location.href: 获取完整的url链接 二,this.$ route.path:前端路由中配置的path 三,this.$ route.fullPath:当前页面除去协议 ...
- js实现一个获取url参数的方法-前端面试题
直接上代码 <script>// 指定参数名称,返回该参数的值 或者 空字符串// 不指定参数名称,返回全部的参数对象 或者 {}// 如果存在多个同名参数,则返回数组/*** @para ...
- js获取url参数的方法
简单方便 function getVariable(url, key) {url = new URL(url);return url.searchParams.get(key) }const url2 ...
- 使用jquery获取url及url参数的方法及定义JQuery扩展方法
1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识. 2.jquery获取 ...
- [开发笔记]-使用jquery获取url及url参数的方法
转载自:作者:酷小孩 出处:http://www.cnblogs.com/babycool/ 使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jque ...
最新文章
- 跟风 Python 的人,后来都怎样了?
- 北大数学“黄金一代”今何在?
- Linux内核分析 读书笔记 (第七章)
- Cocos2d 3.0继承自Sprite的类在addChild后出现故障
- 测试你的电脑是否支持Hyper-V
- apple watch3连android,Apple watch 可以连android手机吗?
- 什么样的项目经历会让面试官眼前一亮
- 安卓学习第10课——listview
- Python求解多元非线性方程组
- gettimeofday函数使用《代码》
- flink API之Sink入门
- 和电商有关的词语_关于电商的一些词
- Illustrator 教程,如何在 Illustrator 中编组内容?
- 一个崭新的华为交换机配置
- 一篇文章带你彻底了解Kubernetes
- 手撕 44 道 JavaScript 送命题
- 软件推荐:Typora -新手上路-夏凌玥
- 创业之前你需要了解的九个真相
- 爬虫第四战爬取糗事百科搞笑段子
- 连锁商超行业使用OA系统实现人、财、物统一管控