方法一：最簡單的方法，利用a標簽來實現(xiàn)

function parseUrl(url){
    var a=document.createElement('a');
    a.href=url;
    return {
      protocol:a.protocol.replace(':',''),
      hostname:a.hostname,
      port:a.port,
      path:a.pathname,
      query:(()=>{
        var query=a.search.substr(1);
        var queryArr=query.split('&');
        var queryObj={};
        queryArr.forEach((item,index)=>{
            var item=item.split('=');
            var key=item[0];
            queryObj[key]=item[1];
        })
        return queryObj;
      })(),
       params:(()=>{
        var params=a.hash.substr(1);
        var paramsArr=params.split('#');
        return paramsArr;
        
      })(),

    }
}
var urlObj = parseUrl('http://www.baidu.com:90/search?name=liyajie&age=12#abc#bbb')
console.log(urlObj)

得到的結(jié)果

image.png

方法二：通過nodejs的url模塊
解析URL需要用到Node.js提供的url模塊，它使用起來非常簡單，通過parse()將一個字符串解析為一個Url對象：

    'use strict';
     var url = require('url');
     console.log(url.parse('http://user:pass@host.com:8080/path/to/file?query=string#hash'));

返回的結(jié)果

Url {
  protocol: 'http:',
  slashes: true,
  auth: 'user:pass',
  host: 'host.com:8080',
  port: '8080',
  hostname: 'host.com',
  hash: '#hash',
  search: '?query=string',
  query: 'query=string',
  pathname: '/path/to/file',
  path: '/path/to/file?query=string',
  href: 'http://user:pass@host.com:8080/path/to/file?query=string#hash' }