JavaScript获取URL参数的四种方法总结
作者：清风细雨_林木木
在前端开发过程中难免会遇到处理url参数的问题,这篇文章主要给大家总结介绍了关于JavaScript获取URL参数的四种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
1.字符串 split 方法（推荐）
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（MDN是一个为所有的学习者从初级到高级的全面、定期更新的Web开发技术指南网站） 中结合两种方法实现参数的获取：
- 使用
new URLSearchParams(url)方法，返回一个URLSearchParams对象，再调用entries()方法返回一个可迭代对象（Iterator）； - 使用
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))
备注：vue中使用一般会报错Object.fromEntries is not a function electron-vue
需要加装插件
npm i polyfill-object.fromentries
引入
import 'polyfill-object.fromentries'
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
<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>总结
到此这篇关于JavaScript获取URL参数的四种方法的文章就介绍到这了,更多相关JS获取URL参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！