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是真数组
发布了142 篇原创文章 · 获赞 77 · 访问量 14万+

猜你喜欢

转载自blog.csdn.net/qq_38845858/article/details/104116684