js封装parseUrl方法解释url成对象

   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
        }

通过以上的方法即可达到目的。