前端JS获取URL参数的4种方法总结
前言
对于前端来说,无论是在面试或者工作中都可能遇到处理 url 参数的问题,使用框架进行项目开发时或许不用,有自带的获取参数方式,但是抛开使用框架来说我们也可以使用原生 js 方式或者借用第三方库来实现参数的获取并对象化,下面就对具体用法进行介绍整理。
方法1: 字符串 split 方法
因为一个 url 地址是字符串形式的,所以利用 split 方法将参数提取出来,该方法比较常用,而且容易理解(对于不太会使用正则的我来说,haha~)
let URL = "http://www.baidu.com?name=张三&age=25&sex=男&wife=小红" function getUrlParams(url) { // 通过 ? 分割获取后面的参数字符串 let urlStr = url.split('?')[1] // 创建空对象存储参数 let obj = {}; // 再通过 & 将每一个参数单独分割出来 let paramsArr = urlStr.split('&') for(let i = 0,len = paramsArr.length;i < len;i++){ // 再通过 = 将每一个参数分割为 key:value 的形式 let arr = paramsArr[i].split('=') obj[arr[0]] = arr[1]; } return obj } console.log(getUrlParams(URL))
方法2: 利用 URLSearchParams 方法
在 MDN 中结合两种方法实现参数的获取:1. 使用 new URLSearchParams(url)
方法,返回一个 URLSearchParams 对象,再调用 entries()
方法返回一个可迭代对象(Iterator);2. 使用 Object.fromEntries(iterable)
方法转化为普通对象
let URL = "http://www.baidu.com?name=Jack&age=25&sex=men&wife=Lucy" function getUrlParams2(url) { let urlStr = url.split('?')[1] const urlSearchParams = new URLSearchParams(urlStr) const result = Object.fromEntries(urlSearchParams.entries()) return result } console.log(getUrlParams2(URL))
特别的:URLSearchParams 方法不仅可以获取参数,还可以将参数对象转为 字符串,详细用法可查看 MDN 中的介绍,并且该方法存在浏览器兼容性问题。
方法3: 利用正则匹配方法
正则匹配功能强大相信很多小伙伴都知道,不仅可以实现在登录注册时的账号、密码、邮箱、手机号等等的验证,还可以非常方便的处理一些字符串(校验、替换、提取等操作),难点在于对正则使用的熟练度,这里就是通过正则提取字符串中需要的字符
let URL = "http://www.baidu.com?name=Tom&friend=Jerry" function getUrlParams3(url){ // \w+ 表示匹配至少一个(数字、字母及下划线), [\u4e00-\u9fa5]+ 表示匹配至少一个中文字符 let pattern = /(\w+|[\u4e00-\u9fa5]+)=(\w+|[\u4e00-\u9fa5]+)/ig; let result = {}; url.replace(pattern, ($, $1, $2)=>{ result[$1] = $2; }) return result } console.log(getUrlParams3(URL))
方法4: 使用第三方库 qs
使用第三方库 qs 也可以实现 url 中参数字符的提取,还能实现将参数对象转为 url 参数形式,需要注意的是浏览器 cdn 方式引入时是默认添加到全局对象 window 的 Qs 属性上的
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.3/qs.min.js"></script> <script> let URL = "http://www.baidu.com?product='iPhone 13 Pro'&price=¥9999.00" function getUrlParams4(url){ // 引入 qs 库时会默认挂在到全局 window 的 Qs 属性上 // console.log(window) let urlStr = url.split('?')[1] let result = Qs.parse(urlStr) // 拼接额外参数 let otherParams = { num:50, size:6.1 } let str = Qs.stringify(otherParams) let newUrl = url + str return {result,newUrl} } console.log(getUrlParams4(URL)) </script>
总结:
到此这篇关于前端JS获取URL参数的4种方法的文章就介绍到这了,更多相关前端获取URL参数内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://juejin.cn/post/7082306920945549325
相关文章
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要介绍了解决Springboot get请求是参数过长的情况,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-17
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
废话不多说了,直接给大家贴代码了。<?php class test{} $a1 = null; $a2 = ""; //$a3 = $a4 = 0; $a5 = '0'; $a6 = false; $a7 = array(); //var $a8; $a9 = new test(); for ($i=1; $i <=9 ; $i++) {...2015-11-24- 这篇文章主要介绍了java正则表达式判断前端参数修改表中另一个字段的值,需要的朋友可以参考下...2021-05-07
- mysql安装成功后有几个默认的配置模板,列表如下: my-huge.cnf : 用于高端产品服务器,包括1到2GB RAM,主要运行mysql my-innodb-heavy-4G.ini : 用于只有innodb的安装,最多有4GB RAM,支持大的查询和低流量 my-large.cnf : 用于...2015-03-15
- 这篇文章主要介绍了C#泛型的类型参数约束的相关资料,文中讲解非常细致,帮助大家更好的理解和学习c#,感兴趣的朋友可以了解下...2020-07-31
- 这篇文章主要给大家介绍了关于C#中out参数、ref参数与值参数的用法及区别的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要介绍了Java线程池中的各个参数如何合理设置操作,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-06-19
- 今天小编就为大家分享一篇python 实现Flask中返回图片流给前端展示,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-04-27
- 这篇文章主要介绍了vue+axios全局添加请求头和参数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-24
处理@PathVariable注解允许参数为空、允许不传参数的问题
这篇文章主要介绍了处理@PathVariable注解允许参数为空、允许不传参数的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-23- 这篇文章主要介绍了SpringBoot接口接收json参数解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-10-19
- 这篇文章主要介绍了pytorch 实现冻结部分参数训练另一部分,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-27
- 这篇文章主要介绍了详解Java后端优雅验证参数合法性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-18
- 这篇文章主要介绍了JS前端模块化的几种规范,对前端模块化感兴趣的同学,可以参考下...2021-05-04
- 这篇文章主要介绍了C#向线程中传递多个参数的解决方法(两种)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了Vue 组件复用多次自定义参数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27
- 这篇文章主要介绍了C# 如何解析获取Url参数值,帮助大家更好的理解和使用c#,感兴趣的朋友可以了解下...2020-09-01
- 这篇文章主要介绍了spring cloud gateway中如何读取请求参数的操作,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-07-15