解析URL

一、什么是解析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 分割 + 循环依次取出

• 解析 url 并将其存储在新对象中，因此初始化一个空对象，让 obj = {}
• 首先判断 url 后面是否有 ？传参, 如果没有 ? 传参，直接返回空对象

if (url.indexOf('?') < 0) return obj

• 用 ？ 进行参数分割 let arr = url.split('?')

此时的效果是将 ? 前后，一分为二

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));
 var url = "https://www.baidu.com/m?f=8&ie=utf-8&rsv_bp=1&tn=monline_3_dg&wd=session"; 
  function getURL(url){
      let str = url.split("?")[1];
      let str1 = str.split("&");
      let obj = {};
      for(let i = 0; i<str1.length; i++){
          let str2 = str1[i].split("=");
          let key = str2[0];
          let value = str2[1];
          obj[key] = value;

      }
      return obj;
  }
  console.log(getURL(url))

三、方法二: 正则 + arguments

• 正则匹配规则 /([^?=&]+)=([^?=&]+)/g

• 利用 replace 替换

• 用伪数组进行键值对拼接

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

四、方法三: 正则 + ..arg

• 就是用 ES6 的 …arg

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

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