如何使用原生JS获取URL链接参数


这篇文章将为大家详细讲解有关如何使用原生JS获取URL链接参数,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。利用原生JS获取URL链接参数的方法也有好几种,今天我们依次来讲解常见的几种:通过正则匹配的方式利用a标签内置方法利用split方法分割法使用URLSearchParams方法这是非常中规中举的一种方法,重点是要求我们要懂正则表达式。代码如下:上段代码中重点是正则表达式的定义以及replace方法的使用,其中$2分别代表name=elephant、name、elephant,以此类推。replace结合正则更加详细的使用方法可以自行下去学习。实现效果:这种方法较少人使用,免费云主机域名因为毕竟有点黑科技的意思在里面。它的原理主要就是利用了a标签得到一些内置属性,如href、hash、search等属性。代码如下:上段代码中先创建了一个a标签,然后就可以根据a标签的属性分别得到url的各个部分了,这其实和Vue的路由跳转获取参数有点类似。实现效果:该种方法利用了split可以以某个字符讲字符串分割为数组的特点,巧妙地将各个参数分割出来。代码如下:上传代码中如果在实际项目中,可以直接利用location.search获取“?”后面的字符串,这里为了方便演示,所以利用split分割了以下。实现效果:URLSearchParams方法能够让我们非常方便的获取URL参数,但是存在一定的兼容性问题,官网的解释如下:URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。该接口提供了非常的的方法让我们来处理URL参数,这里我们只介绍如何获取URL参数值,更加详细的使用方法大家可以参考官网。代码如下:这里我们基本上只用了两行主要代码就实现了参数的解析。需要注意的是urlSearchParams.entries()返回的是一个迭代协议iterator,所以我们需要利用Object.fromEntries()方法将把键值对列表转换为一个对象。关于迭代协议,大家可以参考官网:迭代协议实现效果:兼容性:可以看到我们这个接口不兼容万恶之源的IE。关于“如何使用原生JS获取URL链接参数”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

相关推荐: 小程序中的客服功能都有哪些

这篇文章主要介绍了小程序中的客服功能都有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1,访问多客户服务和自动响应如果仅是单个客户服务,则必须通过以下方式获取用户的查询状态排队服务,这不利于…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 03/30 21:42
下一篇 03/30 21:43

相关推荐