我要评论前言
在前端开发中，处理url参数是一个常见的任务，尤其是在没有框架支持的情况下。虽然许多框架提供了方便的方法来获取url参数，但有时我们需要依赖原生javascript来完成这个任务。这也是面试中经常出现的问题之一。今天让我们一起来探讨如何利用原生javascript来获取url参数值。
获取方法总结
原生js获取url链接参数的方法有好几种，我们一起来学习一下常见的几种。
1.使用正则表达式
2.利用a标签内置方法
3.利用split分割方法
4.使用urlsearchparams方法
具体实现
方法一: 正则表达式
function queryurlparams(url, paramname) {
// 正则表达式模式，用于匹配url中的参数部分。正则表达式的含义是匹配不包含 ?、&、= 的字符作为参数名，之后是等号和不包含 & 的字符作为参数值
let pattern = /([^?&=]+)=([^&]+)/g;
let params = {};
// match用于存储正则匹配的结果
let match;
// while 循环和正则表达式 exec 方法来迭代匹配url中的参数
while ((match = pattern.exec(url)) !== null) {
// 在字符串url中循环匹配pattern，并对每个匹配项进行解码操作，将解码后的键和值分别存储在key和value变量中
let key = decodeuricomponent(match[1]);
let value = decodeuricomponent(match[2]);
if (params[key]) {
if (array.isarray(params[key])) {
params[key].push(value);
} else {
params[key] = [params[key], value];
}
} else {
// 参数名在 params 对象中不存在，将该参数名和对应的值添加到 params 对象中
params[key] = value;
}
}
if (!paramname) {
// 没有传入参数名称, 返回含有所有参数的对象params
return params;
} else {
if (params[paramname]) {
return params[paramname];
} else {
return '';
}
}
}
let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100&name=lion";
console.log(queryurlparams(url)); // 返回所有参数对象
console.log(queryurlparams(url, 'name')); // 返回参数名为 'name' 的所有值
console.log(queryurlparams(url, 'age')); // 返回参数名为 'age' 的值
console.log(queryurlparams(url, 'color')); // 返回""正则表达式解释:
([^?&=]+)：这部分是一个捕获组，表示匹配不包含?、&、=的任意字符的一个或多个，即匹配参数名部分。=：表示匹配参数名和参数值之间的等号。([^&]+)：这部分也是一个捕获组，表示匹配不包含&的任意字符的一个或多个，即匹配参数值部分。g：表示使用全局匹配模式，即匹配目标字符串中所有符合模式的部分。
方法二： 利用a标签
a标签内置的方法能够快速且方便地获取url参数，
它的原理主要就是利用了a标签得到一些内置属性，如href、hash、search等属性。
考虑到url中的哈希部分，在函数queryurlparams(url)中，会检查url中的哈希部分是否存在，如果存在则将哈希值存储到参数对象中，并将属性名设置为"hash"。这样在返回的参数对象中，如果url中有哈希部分，就可以通过"hash"来访问哈希值。
let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100#smallpig"
function queryurlparams(url) {
// 1.创建a标签
let link = document.createelement('a');
link.href = url;
let searchurl = link.search.substr(1); // 获取问号后面字符串
let hashurl = link.hash.substr(1); // 获取#后面的值
let obj = {}; // 声明参数对象
// 2.向对象中进行存储
hashurl ? obj['hash'] = hashurl : null; // #后面是否有值
let list = searchurl.split("&");
for (let i = 0; i < list.length; i++) {
let arr = list[i].split("=");
obj[arr[0]] = arr[1];
}
return obj;
}
console.log(queryurlparams(url))上段代码中先创建了一个a标签，然后就可以根据a标签的属性分别得到url的各个部分了，这其实和vue的路由跳转获取参数有点类似。
1. 将传入的url赋值给 `<a>` 标签的 `href` 属性的目的是利用浏览器提供的原生 api 来帮助实现 url 参数的解析。通过将url赋值给 `<a>` 标签的 `href` 属性，浏览器会自动解析这个url，包括提取其中的协议、主机、路径、查询参数等各个部分，从而方便我们对这个url进行进一步的操作。
2. 通过`link.search.substr(1)`和`link.hash.substr(1)`可以获取url中问号后面的字符串和`#`后面的值，是因为浏览器在解析url后会将这些信息存储在`<a>`标签对象的对应属性中。具体来说：
- `link.search` 包含了 url 中问号后面的部分（即查询参数部分）。
- `link.hash` 包含了 url 中`#`后面的部分（即片段部分）。
- 使用`substr(1)`是为了去掉字符串中的问号或`#`字符，只留下真正的参数内容或片段内容。
方法三： split分割法
这种方法利用了split可以以某个字符讲字符串分割为数组的特点，巧妙地将各个参数分割出来。
function geturlparams(url, paramname) {
// 从 url 中提取查询参数部分
const querystring = url.split('?')[1];
// 如果没有查询参数，返回空对象
if (!querystring) {
return {};
}
// 处理带有 hash 地址的情况
const hashindex = querystring.indexof('#');
if (hashindex !== -1) {
querystring = querystring.substring(0, hashindex);
}
// 将查询参数字符串解析为键值对
const queryparams = {};
querystring.split('&').foreach(param => {
const [key, value] = param.split('=');
// 如果值已经存在，则将其转换为数组存储
if (queryparams[key]) {
if (array.isarray(queryparams[key])) {
queryparams[key].push(decodeuricomponent(value));
} else {
queryparams[key] = [queryparams[key], decodeuricomponent(value)];
}
} else {
queryparams[key] = decodeuricomponent(value);
}
});
// 如果没有指定参数名称，则返回包含所有查询参数的对象
if (!paramname) {
return queryparams;
}
// 如果指定了参数名称
if (queryparams[paramname]) {
return queryparams[paramname];
} else {
// 参数不存在，返回空字符串
return '';
}
}
// 示例 url
const url = 'https://example.com?name=john&age=30&name=jane&gender=male';
const urlwithhash = 'http://xxx.com/#/operations/app?name=john&age=30&name=jane&gender=male';
console.log(geturlparams(url));
// 输出: { name: ['john', 'jane'], age: '30', gender: 'male' }
console.log(geturlparams(url, 'name'));
// 输出: ['john', 'jane']
console.log(geturlparams(url, 'age'));
// 输出: '30'
console.log(geturlparams(url, 'city'));
// 输出: ''
console.log(geturlparams(urlwithhash));
// 输出: { name: ['john', 'jane'], age: '30', gender: 'male' }
关于hash地址部分
在处理 url 查询参数时，通常情况下不需要处理 hash 地址部分。
hash 地址通常用于客户端路由或页面内导航，一般不会包含查询参数信息。
但在某些情况下，可能需要处理带有 hash 地址的 url，例如：
1. 当需要从 url 中提取查询参数时，如果 url 中的查询参数部分后面紧跟着 hash 地址（如 `http://example.com/page?name=john#section2`），需要排除 hash 部分以确保正确提取查询参数。
2. 如果要监听 hash 地址的变化，并根据不同的 hash 地址执行不同的逻辑（如单页面应用路由器），则需要处理 hash 地址的改变并做出响应。 总的来说，在处理 url 查询参数时一般不需要处理 hash 地址部分，但在特定情况下需要注意并处理。
方法四： urlsearchparams
urlsearchparams方法能够让我们非常方便的获取url参数，但是存在一定的兼容性问题，官网的解释如下：
urlsearchparams 接口定义了一些实用的方法来处理 url 的查询字符串。
该接口提供了非常的的方法让我们来处理url参数，这里我们只介绍如何获取url参数值，更加详细的使用方法大家可以参考官网。
let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
function queryurlparams(url) {
let url = url.split("?")[1];
const urlsearchparams = new urlsearchparams(url);
const params = object.fromentries(urlsearchparams.entries());
return params
}
console.log(queryurlparams(url))这里我们基本上只用了两行主要代码就实现了参数的解析。需要注意的是urlsearchparams.entries()返回的是一个迭代协议iterator，所以我们需要利用object.fromentries()方法将把键值对列表转换为一个对象。
关于迭代协议，大家可以参考官网：迭代协议
总结：
这里介绍了四种方法来实现url链接参数值的解析，其中使用最为广泛的应该当属split分割法。总的来说，了解和掌握这些方法可以帮助前端开发者更有效地处理url参数，从而提升开发效率和应对面试中可能出现的相关问题。
到此这篇关于javascript获取url参数常见的4种方法的文章就介绍到这了,更多相关js获取url参数内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论