JavaScript获取URL参数的方法分享


Posted in Javascript onApril 07, 2022

一、字符串 split 方法

url 地址是字符串形式的,所以利用 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));

JavaScript获取URL参数的方法分享

二、使用 URLSearchParams 方法

1、解析搜索字符串

let url = 'https://www.baidu.com/s?ie=UTF-8&wd=%E8%AE%B8%E5%96%84%E7%A5%A5&p=1';
let urlStr = url.split('?')[1];
const params = new URLSearchParams(urlStr);
console.log(params.get('k'));   // 返回字符串“许善祥”,支持自动 UTF-8 解码
console.log(params.get('p'));   // 返回字符串“1”
console.log(params.get('xxx')); // 如果没有 xxx 这个键,则返回 null
console.log(params.has('xxx')); // 当然也可以通过 has() 方法查询是否存在指定的键
console.log(params.keys());     // 返回一个 ES6 Iterator,内含 ['k', 'p']
console.log(params.values());   // 返一个 ES6 Iterator,内含 ['许善祥', '1']
console.log(params.entries());  // 与 Map.prototype.entries() 类似

2、生成搜索字符串

const params = new URLSearchParams();
params.set('k', '许善祥');       // 设置参数
params.set('p', 1);             // 支持 Boolean、Number 等丰富类型
console.log(params.toString()); // k=%E8%AE%B8%E5%96%84%E7%A5%A5&p=1

3、Node.js 代码

const { URLSearchParams } = require('url');

const urlSearchParams = new URLSearchParams();

三、使用正则匹配方法

正则匹配功能强大,不仅可以实现在登录注册时的账号、密码、邮箱、手机号等验证(看这里),还可以非常方便的处理一些字符串(校验、替换、提取等操作)。

let URL = 'http://www.baidu.com?name=祥&friend=宇';
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));
// {name: '祥', friend: '宇'}

四、使用第三方库 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?name=祥&friend=宇';
function getUrlParams4(url) {
    // 引入 qs 库时会默认挂在到全局 window 的 Qs 属性上
    // console.log(window);
    let urlStr = url.split('?')[1];
    let result = Qs.parse(urlStr);
    // 拼接额外参数
    let otherParams = {
        homepage: 'xushanxiang.com'
    };
    let str = Qs.stringify(otherParams);
    let newUrl = url + str;
    return {result, newUrl};
}
console.log(getUrlParams4(URL));

JavaScript获取URL参数的方法分享

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

Javascript 相关文章推荐
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
javascript中Set、Map、WeakSet、WeakMap区别
Dec 24 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 #Javascript
Axios代理配置及封装响应拦截处理方式
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 #Vue.js
动态规划之使用备忘录来改进Javascript函数
Apr 07 #Javascript
vue实现拖拽交换位置
Apr 07 #Vue.js
使用Ajax实现进度条的绘制
You might like
php 删除无限级目录与文件代码共享
2008/11/22 PHP
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
判断浏览器的javascript版本的代码
2010/09/03 Javascript
JQuery live函数
2010/12/24 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
Python实现字符串逆序输出功能示例
2017/06/24 Python
Python 私有函数的实例详解
2017/09/11 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
python获取本机所有IP地址的方法
2018/12/26 Python
python 实现让字典的value 成为列表
2019/12/16 Python
python列表生成器迭代器实例解析
2019/12/19 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
Python try except finally资源回收的实现
2021/01/25 Python
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
J2EE相关知识面试题
2013/08/26 面试题
高中生学习生活的自我评价
2013/11/27 职场文书
领导干部保密承诺书
2014/08/30 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis