JS获取URL参数的4种方法总结

JS获取URL参数的4种方法总结

1.字符串 split 方法(推荐)

javascript">let URL = "http://www.baidu.***?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开发技术指南网站) 中结合两种方法实现参数的获取:

  1. 使用 new URLSearchParams(url) 方法,返回一个 URLSearchParams 对象,再调用 entries() 方法返回一个可迭代对象(Iterator)
  2. 使用 Object.fromEntries(iterable) 方法转化为普通对象
let URL = "http://www.baidu.***?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.***?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.***/ajax/libs/qs/6.10.3/qs.min.js"></script>
<script>
let URL = "http://www.baidu.***?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>
转载请说明出处内容投诉
CSS教程_站长资源网 » JS获取URL参数的4种方法总结

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买