url是唯一资源定位符,在日常web前端开发中经常会接触中,它的组成可以有协议、ip地址、端口、路径、查询参数和网页哈希标志。在js中一个url是一个字符串,而有时需要把url字符串转为对应的对象方式使用,例如:https://abc:3000/ab?a=b#c,转为:
{
protocol: "https",
host: "abc",
path: "/ab",
port: 3000,
query: {
a: b
},
hash: c
}
在转化过程中,有可能遇到hash和query是省略的,那么要用一个方法实现这个功能,我考虑用到正则,封装的方法如下:
function parseUrl(url) {
let urlObj = {
protocol: /^(.+)\:\/\//,
host: /\:\/\/(.+?)[\?\#\s\/]/,
path: /\w(\/.*?)[\?\#\s]/,
query: /\?(.+?)[\#\/\s]/,
hash: /\#(\w+)\s$/
}
url += ' '
function formatQuery(str) {
return str.split('&').reduce((a, b) => {
let arr = b.split('=')
a[arr[0]] = arr[1]
return a
}, {})
}
for(let key in urlObj) {
let pattern = urlObj[key]
urlObj[key] = key === 'query' ? (pattern.exec(url) && formatQuery(pattern.exec(url)[1])) : (pattern.exec(url) && pattern.exec(url)[1])
}
return urlObj
}
通过以上的方法即可达到目的。