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

 更新时间:2022年03月17日 11:48:33   作者:Hacker233  
这篇文章主要给大家介绍了关于利用原生JS获取URL链接参数的几种常见方法,文中通过实例代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

前言

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

1. 获取方式总结

利用原生JS获取URL链接参数的方法也有好几种,今天我们依次来讲解常见的几种:

  • 通过正则匹配的方式
  • 利用a标签内置方法
  • 利用split方法分割法
  • 使用URLSearchParams方法

2. 具体实现方法

2.1 正则匹配法

这是非常中规中举的一种方法,重点是要求我们要懂正则表达式。

代码如下:

<script>
  // 利用正则表达式
  let url = "http://www.baidu.com?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 = "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))
</script>

上段代码中先创建了一个a标签,然后就可以根据a标签的属性分别得到url的各个部分了,这其实和Vue的路由跳转获取参数有点类似。

实现效果:

2.3 split分割法

该种方法利用了split可以以某个字符讲字符串分割为数组的特点,巧妙地将各个参数分割出来。

代码如下:

<script>
  let URL = "http://www.baidu.com?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 = "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))
</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参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • bootstrap table插件的分页与checkbox使用详解

    bootstrap table插件的分页与checkbox使用详解

    这篇文章主要为大家详细介绍了bootstrap table插件的分页与checkbox使用详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • JS中的二叉树遍历详解

    JS中的二叉树遍历详解

    这篇文章主要为大家详细介绍了JS中的二叉树遍历,何为二叉树,什么是二叉树的遍历,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 原生JS实现各种运动之复合运动

    原生JS实现各种运动之复合运动

    这篇文章主要为大家详细介绍了原生JS实现各种运动之复合运动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • js根据鼠标移动速度背景图片自动旋转的方法

    js根据鼠标移动速度背景图片自动旋转的方法

    这篇文章主要介绍了js根据鼠标移动速度背景图片自动旋转的方法,实例分析了javascript操作鼠标与图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 高性能web开发 如何加载JS,JS应该放在什么位置?

    高性能web开发 如何加载JS,JS应该放在什么位置?

    所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。
    2010-05-05
  • javascript与CSS复习(三)

    javascript与CSS复习(三)

    呵呵,又弄成了三部曲,这是最后一部分,关于鼠标和浏览器本身显示上的一些属性。
    2010-06-06
  • js实现文字闪烁特效的方法

    js实现文字闪烁特效的方法

    这篇文章主要介绍了js实现文字闪烁特效的方法,使用style对象来设置css属性,结合定时器就可以实现该功能,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序

    浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序

    下面小编就为大家带来一篇浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • JS实现超简单的鼠标拖动效果

    JS实现超简单的鼠标拖动效果

    这篇文章主要介绍了JS实现超简单的鼠标拖动效果,涉及JavaScript响应鼠标事件动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • js 数据类型转换总结笔记

    js 数据类型转换总结笔记

    js 数据类型转换总结笔记,需要的朋友可以参考下。
    2011-01-01

最新评论