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


Posted in Javascript onApril 05, 2022

前言

对于前端来说,无论是在面试或者工作中都可能遇到处理 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))

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

方法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))

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

特别的: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))

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

方法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种方法总结

总结:

到此这篇关于前端JS获取URL参数的4种方法的文章就介绍到这了,更多相关前端获取URL参数内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
JavaScript中数据结构与算法(一):栈
Jun 19 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 Javascript
threejs太阳光与阴影效果实例代码
JS实现数组去重的11种方法总结
Apr 04 #Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 #Vue.js
JavaScript模拟实现网易云轮播效果
Javascript中Microtask和Macrotask鲜为人知的知识点
vue中div禁止点击事件的实现
Apr 02 #Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 #Vue.js
You might like
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
vue实现登录功能
2020/12/31 Vue.js
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
python实现宿舍管理系统
2019/11/22 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
《雷雨》教学反思
2014/02/20 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
道歉的话语大全
2015/05/12 职场文书
复活读书笔记
2015/06/29 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL