原生JS获取URL链接参数的几种常见方法

原⽣JS获取URL链接参数的⼏种常见⽅法
前⾔
作为⼀个前端开发，我们很多时候都需要对URL进⾏操作和处理，最常见的⼀种就是获取URL链接中携带的参数值了。

使⽤框架开发的⼩伙伴可能会觉得这很简单，因为框架提供了很多⽅法让我们⽅便的获取URL链接携带的参数。

但是有些时候我们不能依赖框架，需要我们使⽤原⽣JS去获取参数，这也是⾯试中经常遇到的⼀道题。

今天我们就⼿撕代码，利⽤原⽣JS去获取URL链接参数值。

1. 获取⽅式总结
利⽤原⽣JS获取URL链接参数的⽅法也有好⼏种，今天我们依次来讲解常见的⼏种：
通过正则匹配的⽅式
利⽤a标签内置⽅法
利⽤split⽅法分割法
使⽤URLSearchParams⽅法
2. 具体实现⽅法
2.1 正则匹配法
这是⾮常中规中举的⼀种⽅法，重点是要求我们要懂正则表达式。

代码如下：
<script>
// 利⽤正则表达式
let url = "?name=elephant&age=25&sex=male&num=100"
// // 返回参数对象
function queryURLParams(url) {
let pattern = /(\w+)=(\w+)/ig; //定义正则表达式
let parames = {}; // 定义参数对象
url.replace(pattern, ($, $1, $2) => {
parames[$1] = $2;
});
return parames;
}
console.log(queryURLParams(url))
</script>
上段代码中重点是正则表达式的定义以及replace⽅法的使⽤,其中$2分别代表name=elephant、name、elephant，以此类推。

replace结合正则更加详细的使⽤⽅法可以⾃⾏下去学习。

实现效果：
2.2 利⽤a标签
这种⽅法较少⼈使⽤，因为毕竟有点⿊科技的意思在⾥⾯。

它的原理主要就是利⽤了a标签得到⼀些内置属性，如href、hash、search等属性。

代码如下：
<script>
let URL = "?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))
</script>
上段代码中先创建了⼀个a标签，然后就可以根据a标签的属性分别得到url的各个部分了，这其实和Vue的路由跳转获取参数有点类似。

实现效果：
2.3 split分割法
该种⽅法利⽤了split可以以某个字符讲字符串分割为数组的特点，巧妙地将各个参数分割出来。

代码如下：
<script>
let URL = "?name=elephant&age=25&sex=male&num=100"
function queryURLParams(URL) {
// const url = location.search; // 项⽬中可直接通过search⽅法获取url中"?"符后的字串
let url = URL.split("?")[1];
let obj = {}; // 声明参数对象
let arr = url.split("&"); // 以&符号分割为数组
for (let i = 0; i < arr.length; i++) {
let arrNew = arr[i].split("="); // 以"="分割为数组
obj[arrNew[0]] = arrNew[1];
}
return obj;
}
console.log(queryURLParams(URL))
</script>
上传代码中如果在实际项⽬中，可以直接利⽤location.search获取“?”后⾯的字符串，这⾥为了⽅便演⽰，所以利⽤split分割了以下。

实现效果：
2.4 URLSearchParams⽅法
URLSearchParams⽅法能够让我们⾮常⽅便的获取URL参数，但是存在⼀定的兼容性问题，官⽹的解释如下：URLSearchParams 接⼝定义了⼀些实⽤的⽅法来处理 URL 的查询字符串。

该接⼝提供了⾮常的的⽅法让我们来处理URL参数，这⾥我们只介绍如何获取URL参数值，更加详细的使⽤⽅法⼤家可以参考官⽹。

代码如下：
<script>
let URL = "?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))
</script>
这⾥我们基本上只⽤了两⾏主要代码就实现了参数的解析。

需要注意的是urlSearchParams.entries()返回的是⼀个迭代协议iterator，所以我们需要利⽤Object.fromEntries()⽅法将把键值对列表转换为⼀个对象。

关于迭代协议，⼤家可以参考官⽹：
实现效果：
兼容性：
可以看到我们这个接⼝不兼容万恶之源的IE。

附：获取URL携带参数实例
getUrlParamValue = function (name) {
if (name == null || name == 'undefined') {return null; }
var searchStr = decodeURI(location.search);
var infoIndex = searchStr.indexOf(name + "=");
if (infoIndex == -1) { return null; }
var searchInfo = searchStr.substring(infoIndex + name.length + 1);
var tagIndex = searchInfo.indexOf("&");
if (tagIndex！= -1) { searchInfo = searchInfo.substring(0, tagIndex); }
return searchInfo;
};
总结
这⾥介绍了四种⽅法来实现URL链接参数值的解析，其中使⽤最为⼴泛的应该当属split分割法。

urlSearchParams 作为后起之秀，也逐渐被⼤家认可，也有很多⽅法让它兼容IE。

到此这篇关于原⽣JS获取URL链接参数的⼏种常见⽅法的⽂章就介绍到这了,更多相关JS获取URL参数内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。