运维开发网

JS获取URL链接参数的几种常用方法

运维开发网 https://www.qedev.com 2022-07-03 20:56 出处:网络
这篇文章主要给大家介绍了关于利用原生JS获取URL链接参数的几种常见方法,文中通过实例代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 前言

这篇文章主要给大家介绍了关于利用原生JS获取URL链接参数的几种常见方法,文中通过实例代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 前言

作为前端开发,我们经常需要操作和处理URL,最常见的就是获取URL链接中携带的参数值。使用框架开发的小伙伴可能会觉得这很简单,因为框架提供了很多方法让我们方便的获取URL链接携带的参数。但是有时候不能依赖框架,需要使用原生JS来获取参数,这也是面试中常见的问题。今天我们就撕代码,用原生JS获取URL链接参数值。

1. 获取方式总结

使用原生JS获取URL链接参数也有几种方法。今天,我们将依次解释常见的几种:

通过正则匹配的方式利用a标签内置方法利用split方法分割法使用URLSearchParams方法2. 具体实现方法2.1 正则匹配法

这是一个非常规的方法,重点是要理解正则表达式。

代码如下:

lt;scriptgt; // 利用正则表达式 let url = "http://www.baidu.comname=elephantamp;age=25amp;sex=maleamp;num=100" // // 返回参数对象 function queryURLParams(url) { let pattern = /(\w+)=(\w+)/ig; //定义正则表达式 let parames = {}; // 定义参数对象 url.replace(pattern, ($, $1, $2) =gt; { parames[$1] = $2; }); return parames; } console.log(queryURLParams(url))lt;/scriptgt;

上面的代码重点介绍了正则表达式的定义和replace方法的使用,其中代表name=elephant,name,elephant,依此类推。Replace结合了常规和更详细的使用方法,可以自己学习。

达到效果:


2.2 利用a标签

这种方法很少有人用,因为毕竟有一点黑科技在里面。它的原理是用一个标签来获取一些内置的属性,比如href、hash、search等等。



代码如下:

lt;scriptgt; let URL = "http://www.baidu.comname=elephantamp;age=25amp;sex=maleamp;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("amp;"); for (let i = 0; i lt; list.length; i++) { let arr = list[i].split("="); obj[arr[0]] = arr[1]; } return obj; } console.log(queryURLParams(URL))lt;/scriptgt;

在前面的代码中,先创建一个A标签,然后根据A标签的属性就可以得到url的各个部分,其实有点类似于Vue的路由跳转获取参数。

达到效果:


2.3 split分割法

这种方法利用了split可以把一个字符串分成数组的特性,巧妙地把各个参数分开。

代码如下:

lt;scriptgt; let URL = "http://www.baidu.comname=elephantamp;age=25amp;sex=maleamp;num=100" function queryURLParams(URL) { // const url = location.search; // 项目中可直接通过search方法获取url中""符后的字串 let url = URL.split("")[1]; let obj = {}; // 声明参数对象 let arr = url.split("amp;"); // 以amp;符号分割为数组 for (let i = 0; i lt; arr.length; i++) { let arrNew = arr[i].split("="); // 以"="分割为数组 obj[arrNew[0]] = arrNew[1]; } return obj; } console.log(queryURLParams(URL))lt;/scriptgt;

如果上传的代码在实际项目中,可以直接使用location.search获取ldquordquo这里为了演示方便,下面的字符串是用split拆分的。

达到效果:


2.4 URLSearchParams方法

URLSearchParams方法可以让我们非常方便的获取URL参数,但是存在一些兼容性问题。官网的解释如下:

URLSearchParams接口定义了一些实用的方法来处理URL的查询字符串。

这个接口为我们处理URL参数提供了一个非常好的方法。这里只介绍如何获取URL参数值。更详细的用法请参考官网。

代码如下:

lt;scriptgt; let URL = "http://www.baidu.comname=elephantamp;age=25amp;sex=maleamp;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))lt;/scriptgt;

在这里,我们基本上只用两行主代码来解析参数。注意,urlSearchParams.entries()返回一个迭代协议迭代器,所以我们需要使用Object.fromEntries()方法将键-值对的列表转换成一个对象。

迭代协议可以参考官网:迭代协议。

达到效果:


兼容性:


你可以看到我们的界面与IE不兼容,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("amp;");if (tagIndex!= -1) { searchInfo = searchInfo.substring(0, tagIndex); }return searchInfo;};总结

这里介绍四种解析URL链接参数值的方法,其中应用最广泛的应该是split方法。UrlSearchParams作为后起之秀,逐渐被大家认可,有很多方法可以让它兼容IE。

以上就是本文关于native JS获取URL链接参数的几种常用方法。关于JS获取URL参数的更多信息

0

精彩评论

暂无评论...
验证码 换一张
取 消