快速匹配地址栏参数

        前端页面操作时总会遇到获取地址栏search参数的情况，但又不是很频繁，所以用到时候总是忘记之前怎么写的，所以归纳总结一下，方便以后使用

示例： demo.html?id=1&name=csnd&age=10

1、使用正则匹配

 new RegExp(`(\\?|^|&)${name}=([^&]*)(&|$)`)

/(\?|^|&)id=([^&]*)(&|$)/  // 简写 name = 'id' 为例

具体实现方法

function getQueryByName(name) {
    var reg = new RegExp(`(\\?|^|&)${name}=([^&]*)(&|$)`)
    var search = decodeURIComponent(location.search)
    var arr = search.match(reg)
    // 没有匹配到则返回 null 我们默认返回空字符串 ''
    // 匹配到则为数组 我们用到的是下标为2的第3项
    return arr ? arr[2] : ''
}

console.log('id: ', getQueryByName('id'))

2、使用url的属性方法

function getQueryByName(name) {
    const url = new URL(location)
    const searchParams = url.searchParams
    return searchParams.get(name)
}

console.log('id: ', getQueryByName('id'))

3、字符串截取，循环遍历

// 获取地址栏search字符串截去?并解码
var search = decodeURIComponent(location.search.substr(1))
// 按&做截取
var arr1 = search.split('&')
var queryObj = {}
// 按=做截取并存储到对象queryObj里
arr1.forEach(item => {
    let arr = item.split('=')
    queryObj[arr[0]] = arr[1]
})

// 取值
console.log('参数对象: ', queryObj)