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