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

fltenwall2023-07-21 15:47

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

功能说明

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

实现方式一：字符串拆分

javascript 复制代码 
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

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

考虑各种情况：

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

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

javascript 复制代码 
const queryUrlPramas = function(url, attr){
    let askIndex = url.indexOf('?'),
        hashIndex = url.lastIndexOf('#'),
        askText = '',
        hashText = '',
        params = {};

    // 1. `#`不存在，`?`存在，`?`后的参数直接截取到末尾
    if(hashIndex === -1 && askIndex >= 0){
        askText = url.substring(askIndex + 1)
    }
    // 2. `#`存在，`?`不存在，`#`后的参数直接截取到末尾
    else if(hashIndex >= 0 && askIndex === -1){
        hashText = url.substring(hashIndex + 1)
    }
    else if(hashIndex >= 0 && askIndex >= 0){
        // 4. `#`在`?`后面，`?`后的参数从`?`截取到`#`，hash从`#`截取到末尾
        if(hashIndex > askIndex){
            askText = url.substring(askIndex + 1, hashIndex)
            hashText = url.substring(hashIndex + 1)
        }
        // 5. `#`在`?`前面，hash从`#`截取到`?`，`?`后的参数直接截取到末尾
        else {
            hashText = url.substring(hashIndex + 1, askIndex)
            askText = url.substring(askIndex + 1)
        }
    }
    hashText !== '' ? params['hash'] = hashText : null
    if(askText !== ''){
        const askTextArr = askText.split('&')
        askTextArr.forEach(element => {
            let [key, val] = element.split('=')
            params[key] = val
        })
    }
    return typeof attr !== 'undefined' ? params[attr] : params
}

测试不同情况下的结果：

javascript 复制代码 
// 1. `#`不存在，`?`存在，`?`后的参数直接截取到末尾
const url1 = 'https://www.bilibili.com/video/eeee/?a=1&b=2'
console.log(queryUrlPramas(url1)) // { a: '1', b: '2' }

// 2. `#`存在，`?`不存在，`#`后的参数直接截取到末尾
const url2 = 'https://www.bilibili.com/video/eeee/#ccc'
console.log(queryUrlPramas(url2)) // { hash: 'ccc' }

// 3. `#`和`?`都不存在，不做任何处理
const url3 = 'https://www.bilibili.com/video/eeee/'
console.log(queryUrlPramas(url3)) // {}

// 4. `#`在`?`后面，`?`后的参数从`?`截取到`#`，hash从`#`截取到末尾
const url4 = 'https://www.bilibili.com/video/eeee/?a=1&b=2#ccc'
console.log(queryUrlPramas(url4)) // { hash: 'ccc', a: '1', b: '2' }
// 5. `#`在`?`前面，hash从`#`截取到`?`，`?`后的参数直接截取到末尾
const url5 = 'https://www.bilibili.com/video/eeee/#ccc?a=1&b=2'
console.log(queryUrlPramas(url5)) // { hash: 'ccc', a: '1', b: '2' }

实现方式二：利用<a>标签

javascript 复制代码 
const queryUrlPramas = function(url, attr){
    let askText = '',
        hashText = '',
        params = {};
    let linkObj = document.createElement('a');
    linkObj.href = url;
    askText = linkObj.search.substring(1); // 去掉?
    hashText = linkObj.hash.substring(1); // 去掉#
    linkObj = null;

    // 解析参数
    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
}

测试不同情况下的结果：

javascript 复制代码 
// 1. `#`不存在，`?`存在
const url1 = 'https://www.bilibili.com/video/eeee/?a=1&b=2'
console.log(queryUrlPramas(url1)) // { a: '1', b: '2' }

// 2. `#`存在，`?`不存在
const url2 = 'https://www.bilibili.com/video/eeee/#ccc'
console.log(queryUrlPramas(url2)) // { hash: 'ccc' }

// 3. `#`和`?`都不存在
const url3 = 'https://www.bilibili.com/video/eeee/'
console.log(queryUrlPramas(url3)) // {}

// 4. `#`在`?`后面
const url4 = 'https://www.bilibili.com/video/eeee/?a=1&b=2#ccc'
console.log(queryUrlPramas(url4)) // { hash: 'ccc', a: '1', b: '2' }
// 5. `#`在`?`前面
const url5 = 'https://www.bilibili.com/video/eeee/#ccc?a=1&b=2'
console.log(queryUrlPramas(url5)) // {hash: 'ccc?a=1&b=2'}

会发现在第 5 中情况下，即#在?前面的情况下，无法正常处理，需要手动进行判断修正。

另外可以使用ES6 提供的URLSearchParams类进行参数字符串处理，简化解析：

javascript 复制代码 
new URLSearchParams('a=1&b=2').forEach((val, key)=> console.log(val,key)) // 1 a ; 2 b

因此可以用

javascript 复制代码 
new URLSearchParams(askText).forEach((val, key)=> params[key] = val)

替换之前的代码：

javascript 复制代码 
const askTextArr = askText.split('&')
askTextArr.forEach(element => {
    let [key, val] = element.split('=')
    params[key] = val
})

实现方式三：利用正则表达式

javascript 复制代码 
const queryUrlPramas = function(url, attr){
    let params = {};
    url.replace(/#([^?=#&]+)/g,(_,hash)=>params['hash']=hash)
    url.replace(/([^?=#&]+)=([^?=#&]+)/g, (_,key,val)=>params[key]=val)
    return typeof attr !== 'undefined' ? params[attr] : params
}

测试不同情况下的结果：

javascript 复制代码 
// 1. `#`不存在，`?`存在
const url1 = 'https://www.bilibili.com/video/eeee/?a=1&b=2'
console.log(queryUrlPramas(url1)) // { a: '1', b: '2' }

// 2. `#`存在，`?`不存在
const url2 = 'https://www.bilibili.com/video/eeee/#ccc'
console.log(queryUrlPramas(url2)) // { hash: 'ccc' }

// 3. `#`和`?`都不存在
const url3 = 'https://www.bilibili.com/video/eeee/'
console.log(queryUrlPramas(url3)) // {}

// 4. `#`在`?`后面
const url4 = 'https://www.bilibili.com/video/eeee/?a=1&b=2#ccc'
console.log(queryUrlPramas(url4)) // { hash: 'ccc', a: '1', b: '2' }
// 5. `#`在`?`前面
const url5 = 'https://www.bilibili.com/video/eeee/#ccc?a=1&b=2'
console.log(queryUrlPramas(url5)) // { hash: 'ccc', a: '1', b: '2' }

每种情况结果都正常。

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

相关推荐
Jimmy8 分钟前
TypeScript 泛型：2025 年终极指南
前端·javascript·typescript
Spider_Man17 分钟前
栈中藏玄机：从温度到雨水，单调栈的逆袭之路
javascript·算法·leetcode
jstart千语25 分钟前
【vue】创建响应式数据ref和reactive的区别
前端·javascript·vue.js
BUG收容所所长34 分钟前
Zustand状态管理如何驱动低代码平台的数据流？
前端·javascript·设计
BUG收容所所长39 分钟前
React递归渲染与react-dnd——低代码平台的组件拖拽与动态渲染实践
前端·javascript·设计
小妖6662 小时前
Next.js 怎么使用 Chakra UI
前端·javascript·ui
胡西风_foxww2 小时前
从数据丢失到动画流畅：React状态同步与远程数据加载全解析
前端·javascript·react.js·同步·异步·数据·状态
格调UI成品2 小时前
[特殊字符] 数据可视化结合 three.js：让 3D 呈现更精准，3 个优化经验谈
javascript·3d·信息可视化
初遇你时动了情3 小时前
JS中defineProperty/Proxy 数据劫持 vue3/vue2双向绑定实现原理，react 实现原理
javascript·vue.js·react.js
汪子熙3 小时前
Angular 最新的 Signals 特性详解
前端·javascript
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02全球最强模型Grok4，国内已可免费使用！（附教程）03VMware Workstation Pro虚拟机的下载和安装图文保姆级教程(附下载链接)04MSPM0G3507——读取引脚的高低电平方法（数字信号循迹模块）05KGG转MP3工具|非KGM文件|解密音频06UV安装并设置国内源07腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）08Coze 开源了，送上保姆级私有化部署方案【建议收藏】092025电赛e题：openmv识别过程丢失矩形10扣子开源本地部署教程 丨Coze智能体小白喂饭级指南