JS获取URL参数

1.字符串 split 方法

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;
}

2.利用 URLSearchParams 方法

function getUrlParams(url) {
    let urlStr = url.split('?')[1];
    const urlSearchParams = new URLSearchParams(urlStr);
    const result = Object.fromEntries(urlSearchParams.entries());
    return result;
}

备注：vue中使用一般会报错Object.fromEntries is not a function electron-vue

下载插件并引入：

npm i polyfill-object.fromentries

import 'polyfill-object.fromentries'

3.利用正则匹配方法

function getUrlParams(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;
}

4.使用第三方库 qs

function getUrlParams(url){
    // 引入 qs 库时会默认挂在到全局 window 的 Qs 属性上
    let urlStr = url.split('?')[1]
    let result = Qs.parse(urlStr);
    return result;
}