JavaScript获取URL参数常见的4种方法

function queryURLParams(url, paramName) {
    // 正则表达式模式，用于匹配URL中的参数部分。正则表达式的含义是匹配不包含 ?、&、= 的字符作为参数名，之后是等号和不包含 & 的字符作为参数值
    let pattern = /([^?&=]+)=([^&]+)/g;
    let params = {};
    
    // match用于存储正则匹配的结果
    let match;
    // while 循环和正则表达式 exec 方法来迭代匹配URL中的参数
    while ((match = pattern.exec(url)) !== null) {
        // 在字符串url中循环匹配pattern，并对每个匹配项进行解码操作，将解码后的键和值分别存储在key和value变量中
        let key = decodeURIComponent(match[1]);
        let value = decodeURIComponent(match[2]);
        
        if (params[key]) {
            if (Array.isArray(params[key])) {
                params[key].push(value);
            } else {
                params[key] = [params[key], value];
            }
        } else {
            // 参数名在 params 对象中不存在，将该参数名和对应的值添加到 params 对象中
            params[key] = value;
        }
    }
    
    if (!paramName) {
        // 没有传入参数名称, 返回含有所有参数的对象params
        return params;
    } else {
        if (params[paramName]) {
            return params[paramName];
        } else {
            return '';
        }
    }
}

let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100&name=lion";
console.log(queryURLParams(url)); // 返回所有参数对象
console.log(queryURLParams(url, 'name')); // 返回参数名为 'name' 的所有值
console.log(queryURLParams(url, 'age')); // 返回参数名为 'age' 的值
console.log(queryURLParams(url, 'color')); // 返回""

let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100#smallpig"
  function queryURLParams(url) {
    // 1.创建a标签
    let link = document.createElement('a');
    link.href = url;
    let searchUrl = link.search.substr(1); // 获取问号后面字符串
    let hashUrl = link.hash.substr(1); // 获取#后面的值
    let obj = {}; // 声明参数对象
    // 2.向对象中进行存储
    hashUrl ? obj['HASH'] = hashUrl : null; // #后面是否有值

    let list = searchUrl.split("&");
    for (let i = 0; i < list.length; i++) {
      let arr = list[i].split("=");
      obj[arr[0]] = arr[1];
    }
    return obj;
  }
  console.log(queryURLParams(URL))

function getUrlParams(url, paramName) {
    // 从 URL 中提取查询参数部分
    const queryString = url.split('?')[1];
    
    // 如果没有查询参数，返回空对象
    if (!queryString) {
        return {};
    }
    
    // 处理带有 hash 地址的情况
    const hashIndex = queryString.indexOf('#');
    if (hashIndex !== -1) {
        queryString = queryString.substring(0, hashIndex);
    }
    
    // 将查询参数字符串解析为键值对
    const queryParams = {};
    queryString.split('&').forEach(param => {
        const [key, value] = param.split('=');
        // 如果值已经存在，则将其转换为数组存储
        if (queryParams[key]) {
            if (Array.isArray(queryParams[key])) {
                queryParams[key].push(decodeURIComponent(value));
            } else {
                queryParams[key] = [queryParams[key], decodeURIComponent(value)];
            }
        } else {
            queryParams[key] = decodeURIComponent(value);
        }
    });
    
    // 如果没有指定参数名称，则返回包含所有查询参数的对象
    if (!paramName) {
        return queryParams;
    }
    
    // 如果指定了参数名称
    if (queryParams[paramName]) {
        return queryParams[paramName];
    } else {
        // 参数不存在，返回空字符串
        return '';
    }
}

// 示例 URL
const url = 'https://example.com?name=John&age=30&name=Jane&gender=male';
const urlWithHash = 'http://xxx.com/#/operations/app?name=John&age=30&name=Jane&gender=male';

console.log(getUrlParams(url)); 
// 输出: { name: ['John', 'Jane'], age: '30', gender: 'male' }

console.log(getUrlParams(url, 'name'));
// 输出: ['John', 'Jane']

console.log(getUrlParams(url, 'age'));
// 输出: '30'

console.log(getUrlParams(url, 'city'));
// 输出: ''

console.log(getUrlParams(urlWithHash)); 
// 输出: { name: ['John', 'Jane'], age: '30', gender: 'male' }

 let URL = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
  function queryURLParams(URL) {
    let url = URL.split("?")[1];
    const urlSearchParams = new URLSearchParams(url);
    const params = Object.fromEntries(urlSearchParams.entries());
    return params
  }
  console.log(queryURLParams(URL))