前端JS获取URL参数的方法有哪些

今天小编给大家分享一下前端JS获取URL参数的方法有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

方法1: 字符串 split 方法

因为一个 url 地址是字符串形式的，所以利用 split 方法将参数提取出来，该方法比较常用，而且容易理解（对于不太会使用正则的我来说，haha~）

let URL = "http://www.baidu.com?name=张三&age=25&sex=男&wife=小红"function getUrlParams(url) {    // 通过 ? 分割获取后面的参数字符串    let urlStr = url.split('?')[1]    // 创建空对象存储参数        let obj = {};    // 再通过 & 将每一个参数单独分割出来        let paramsArr = urlStr.split('&')        for(let i = 0,len = paramsArr.length;i < len;i++){        // 再通过 = 将每一个参数分割为 key:value 的形式                let arr = paramsArr[i].split('=')                obj[arr[0]] = arr[1];        }        return obj}console.log(getUrlParams(URL))

方法2: 利用 URLSearchParams 方法

在 MDN 中结合两种方法实现参数的获取：1. 使用 new URLSearchParams(url) 方法，返回一个 URLSearchParams 对象，再调用 entries() 方法返回一个可迭代对象（Iterator）；2. 使用 Object.fromEntries(iterable) 方法转化为普通对象

let URL = "http://www.baidu.com?name=Jack&age=25&sex=men&wife=Lucy"function getUrlParams2(url) {        let urlStr = url.split('?')[1]        const urlSearchParams = new URLSearchParams(urlStr)        const result = Object.fromEntries(urlSearchParams.entries())        return result}console.log(getUrlParams2(URL))

特别的：URLSearchParams 方法不仅可以获取参数，还可以将参数对象转为 字符串，详细用法可查看 MDN 中的介绍，并且该方法存在浏览器兼容性问题。

方法3: 利用正则匹配方法

正则匹配功能强大相信很多小伙伴都知道，不仅可以实现在登录注册时的账号、密码、邮箱、手机号等等的验证，还可以非常方便的处理一些字符串（校验、替换、提取等操作），难点在于对正则使用的熟练度，这里就是通过正则提取字符串中需要的字符

let URL = "http://www.baidu.com?name=Tom&friend=Jerry"function getUrlParams3(url){        // \w+ 表示匹配至少一个(数字、字母及下划线), [\u4e00-\u9fa5]+ 表示匹配至少一个中文字符        let pattern = /(\w+|[\u4e00-\u9fa5]+)=(\w+|[\u4e00-\u9fa5]+)/ig;        let result = {};        url.replace(pattern, ($, $1, $2)=>{                result[$1] = $2;        })        return result}console.log(getUrlParams3(URL))

方法4: 使用第三方库 qs

使用第三方库 qs 也可以实现 url 中参数字符的提取，还能实现将参数对象转为 url 参数形式，需要注意的是浏览器 cdn 方式引入时是默认添加到全局对象 window 的 Qs 属性上的

以上就是"前端JS获取URL参数的方法有哪些"这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注行业资讯频道。