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 相关文章推荐
JavaScript 基础问答三
Dec 03 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
详解js前端代码异常监控
Jan 11 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
如何通过简单的代码描述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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
可以在线执行PHP代码包装修正版
2008/03/15 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
php url路由入门实例
2014/04/23 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
Extjs 几个方法的讨论
2010/01/28 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
JavaScript知识点整理
2015/12/09 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
校园十大歌手策划书
2014/02/01 职场文书
开会迟到检讨书
2014/02/03 职场文书
求职面试个人自我评价
2014/02/28 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
保护动物倡议书
2014/04/15 职场文书
领导工作表现评语
2015/01/04 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL