js解析url地址栏参数，看这一篇就够了

最新推荐文章于 2024-10-02 11:53:16 发布

凉小水

最新推荐文章于 2024-10-02 11:53:16 发布

阅读量1.1w

点赞数 5

分类专栏： vue 前端文章标签： javascript

本文链接：https://blog.csdn.net/Auroka/article/details/108384353

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

1.针对当前地址栏

// http://xxx?type=list
const paramsStr = window.location.search
const params = new URLSearchParams(paramsStr)
params.get('type') // list

2.针对已知url字符串

const url = new URL('http://xxx?type=list')
const paramsStr = url.search.slice(1)
const params = new URLSearchParams(paramsStr)
params.get('type') // list

3.普通函数实现

getUrlParam('http://xxx?type=list','type') 

function getUrlParam(urlStr, urlKey) {
    const url = new URL(urlStr) // 字符串转换成url格式
    const paramsStr = url.search.slice(1) // 获取'?'后面的参数字符串
    const paramsArr = paramsStr.split('&') // 分割'&'字符 获得参数数组
    for (let i = 0; i < paramsArr.length; i++) {
      const tempArr = paramsArr[i].split('=')
          if (tempArr[0] === urlKey) {
            return tempArr[1]
          }
    }
}

4.正则方式实现

getUrlParam('http://xxx?type=list','type')

function getUrlParam(urlStr, urlKey) {
    const url = new URL(urlStr)
    var reg = new RegExp('[\?\&]' + urlKey + '=([^\&]*)(\&?)', 'i')
    var r = url.search.match(reg)
    return r ? r[1] : ''
}