介绍javascript获取url参数的四种方法？

在做开发的时候，我们会需要获取链接上的参数，下面web建站小编给大家介绍一下获取url参数的四种方法？

1、利用正则获取

let getUrl = "https://ipkd.cn?name=web&friend=jtmc"
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(getUrl))
//{name: 'web', friend: 'jtmc'}

2、利用split获取

let getUrl = "https://ipkd.cn?name=web&friend=jtmc"
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(getUrl))
//{name: 'web', friend: 'jtmc'}

3、利用URLSearchParams获取

let getUrl = "https://ipkd.cn?name=web&friend=jtmc"
function getUrlParams(url) {
  let urlStr = url.split('?')[1]
  const urlSearchParams = new URLSearchParams(urlStr)
  const result = Object.fromEntries(urlSearchParams.entries())
  return result
}
console.log(getUrlParams(getUrl))
//{name: 'web', friend: 'jtmc'}

4、使用第三方库qs获取

//引入js
https://cdn.bootcdn.net/ajax/libs/qs/6.10.3/qs.min.js

let getUrl = "https://ipkd.cn?name=web&friend=jtmc"
function getUrlParams(url){
  // 引入 qs 库时会默认挂在到全局 window 的 Qs 属性上
  // console.log(window)
  let urlStr = url.split('?')[1]
  let result = Qs.parse(urlStr)
  // 拼接额外参数
  let otherParams = {
      num:50,
      size:6.1
  }
  let str = Qs.stringify(otherParams)
  let newUrl = url + str
  return {result,newUrl}
}
console.log(getUrlParams(getUrl))

js链接新增（修改）参数页面不刷新

javascript有哪些代码可以单行解决的

js方法实现对象转url参数

js新增/修改/删除url地址参数名称

JavaScript开发小技巧之各种URL操作

标签： url参数, 获取参数

上面是“介绍javascript获取url参数的四种方法？”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2471.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！