[javascript核心-10] 解析params参数的多种方案

本文链接：https://blog.csdn.net/qq_32925031/article/details/131813546

本文探讨了在JavaScript中解析URL参数的三种方法：字符串拆分、利用URLSearchParams接口和正则表达式。详细解释了每种方法的实现细节，并通过测试案例展示了它们在不同情况下的表现。同时，提到了在特定情况下需要手动调整的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文github地址:JavaScript_Everything 大前端知识体系与面试宝典，从前端到后端，全栈工程师，成为六边形战士

功能说明

queryUrlPramas()接收两个参数url,attr。如果不传第二个参数，那么返回解析url的对象，如果传入attr，则只返回attr对应的值。

实现方式一：字符串拆分

const queryUrlPramas = function(url, attr){
   
   
    let askIndex = url.indexOf('?'),
        hashIndex = url.lastIndexOf('#'),
        askText = '',
        hashText = '',
        params = {
   
   };
    hashText = url.substring(hashIndex + 1);
    askText = url.substring(askIndex + 1, hashIndex)

    params['hash'] = hashText
    const askTextArr = askText.split('&')
    askTextArr.forEach(element => {
   
   
        let [key, val] = element.split('=')
        params[key] = val
    })
    return typeof attr !== 'undefined' ? params[attr] : params
}

const url = 'https://www.bilibili.com/video/eeee/?p=256&spm_id_from=333.7777.top_right_bar_window_history.content.click&vd_source=29aaaa68d14f71bbbb#video'

console.log(queryUrlPramas(url))
/*
{
  hash: 'video',
  p: '256',
  spm_id_from: '333.7777.top_right_bar_window_history.content.click',
  vd_source: '29aaaa68d14f71bbbb'
}
*/
console.log(queryUrlPramas(url, 'p')) // 256

问题：#或?不存在时会索引计算会出现问题，导致解析出错；如果#出现在?前时，解析也会出现问题。

考虑各种情况：

#不存在，?存在，?后的参数直接截取到末尾
#存在，?不存在，#后的参数直接截取到末尾
#和?都不存在，不做任何处理
#在?后面，?后的参数从?截取到#，hash从#截取到末尾
#在?前面，hash从#截取到?，?后的参数直接截取到末尾

字符串解析考虑各种情况：

const queryUrlPramas = function(url, attr){
   
   
    let askIndex =