js解析url三种方法

js解析url，就是将如下url
const url = 'https://www.baidu.com/m?f=8&ie=utf-8&rsv_bp=1&tn=monline_3_dg&wd=session'
解析为

法一： 利用splice分割+循环依次取出
先看代码

function queryURLparams(url) {
    let obj = {}
    if (url.indexOf('?') < 0) return obj
    let arr = url.split('?')
    url = arr[1]
    let array = url.split('&')
    for (let i = 0; i < array.length; i++) {
        let arr2 = array[i]
        let arr3 = arr2.split('=')
        obj[arr3[0]] = arr3[1]
    }
    return obj

}
console.log(queryURLparams(url));

要点分析

• 将url解析出来，要存放在一个新的对象中，所以要初始化一个空的对象let obj = {}
• 首先判断url后面是否有？传参,如果没有?传参，直接返回空对象
  if (url.indexOf('?') < 0) return obj
• 用？ 进行参数分割 let arr = url.split('?')
  此时的效果是将? 前后，一分为二
  
• 一分为二之后，第二部分才是我们要的参数，所以先将第二部分取出来
  url = arr[1]
  效果图
  
• 通过观察 ，下一步就是用 & 进行分割
  let array = url.split('&')
  效果图
  
• 现在是数组字符串，要将数组字符串，拆成对象键值对的形式， 通过循环

for (let i = 0 ;i < array.length; i++) {
let arr2 = array[i] // 将数组中的每一个字符串都取出来，赋值给arr
let arr3 = arr2.splice('=') //对每一个字符串，用= 进行分割 形如'f=8'，现在分割为 'f,8',下一步就是组合成键值对的形式
obj[arr3[0]] = arr3[1]
}

• 返回url解析好的对象 return obj
• 调用函数，输出结果 console.log(queryURLparams(url))
  法二: 正则+arguments
  代码

function queryURLparamsRegEs5(url) {
    let obj = {}
    let reg = /([^?=&]+)=([^?=&]+)/g
    url.replace(reg, function() {
        obj[arguments[1]] = arguments[2]
    })
    return obj

}

要点分析

• 正则匹配规则 /([^?=&]+)=([^?=&]+)/g
• 利用replace替换
• 用伪数组进行键值对拼接

法三: 正则+ ..arg

function queryURLparamsRegEs6(url) {
    let obj = {}
    let reg = /([^?=&]+)=([^?=&]+)/g
    url.replace(reg, (...arg) => {
        obj[arg[1]] = arg[2]
    })
    return obj

}

要点分析

• 就是用es6的 …arg
• 其实和arguments差不多 ，就是arguments是伪数组，…arg是真数组