想要使用 JavaScript 获取地址栏中的传参,可以通过以下两种方式实现:
想要使用 JavaScript 获取地址栏中的传参,可以通过以下两种方式实现:
方法一:使用 window.location.search 获取查询字符串
地址栏的查询字符串可以使用 window.location.search 属性获取。查询字符串以问号(?)开头,其后紧跟着以 & 符号分隔的多个键值对,例如:http://www.example.com?name=John&age=20。
我们可以通过如下代码获取地址栏中 query 参数的值:
// 获取地址栏中查询字符串
const query = window.location.search;
// 使用 URLSearchParams 解析查询字符串
const params = new URLSearchParams(query);
// 获取名称为 name 的参数
const name = params.get('name');
// 获取名称为 age 的参数
const age = params.get('age');
这其中,URLSearchParams 类用于解析查询参数,并通过 get 方法获取指定键名的对应值。需要注意的是,如果 query 参数中存在多个同名键值对,则只会获取第一个键值对的值。
方法二:使用正则表达式获取指定参数
除了使用 URLSearchParams 对象外,我们还可以通过正则表达式匹配地址栏中的 query 参数,例如:
// 获取 query 参数
const query = window.location.search;
// 定义匹配表达式
const reg = /[\?\&](\w+)=(\w+)/ig;
// 定义用于存储结果的对象
const params = {};
// 解析 URL 参数
query.replace(reg, function(a, b, c){
params[b] = c;
});
// 获取名称为 name 的参数
const name = params['name'];
// 获取名称为 age 的参数
const age = params['age'];
上述代码中,我们通过正则表达式解析出地址栏中的 query 字符串,并通过 replace 方法将其转换为 Object 类型的键值对。需要注意的是,当存在多个同名参数时,会覆盖前面的值。
希望以上两种方法能够对大家有所帮助。
本文标题为:使用js获取地址栏中传递的值


基础教程推荐
- 8.音频标签,视频标签.html 2023-10-27
- Js 获取、判断浏览器版本信息的简单方法 2023-12-20
- javascript检查浏览器是否已经启用XX功能 2023-12-19
- 学习如何使用小写字母CSS提高网站的可读性和可维护性 2023-10-08
- Vue入门笔记Day 8 2023-10-08
- 关于微信浏览器H5 React,Vue工程化项目input无法自动聚焦疑难杂症排查 2023-10-08
- 返回页面顶部top按钮通过锚点实现(自写) 2023-11-30
- js判断两个字符串是否相等的两种方法 2023-07-10
- 手机安装GreasyFork油猴js脚本的教程 2023-08-11
- 如何使用jquery的jquery.jqprint.js打印网页内容,jquery.jqprint.js插件下载 2023-08-29