js解析url三种方法

本是古典何须时尚 2021-08-24 13:31 648阅读 0赞

js解析url，就是将如下url  
`const url = 'https://www.baidu.com/m?f=8&ie=utf-8&rsv_bp=1&tn=monline_3_dg&wd=session'`  
解析为  
![在这里插入图片描述][20200130171234462.png]  
法一： `利用splice分割+循环依次取出`  
先看代码

要点分析

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

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是真数组

[20200130171234462.png]: /images/20210813/f20de4cfda54426fb0ba8ea75512529c.png
[20200130171704741.png]: /images/20210813/2ee36acdf98b4f23ae3a8895caefea14.png
[20200130172156560.png]: /images/20210813/2ae4b78fb61e434b9e91e3af9279aec6.png
[20200130172305263.png]: /images/20210813/51cacbc2446644e3b7c1920109df1f76.png