JS中解析URL的简单方法

在web应用中解析URL并不容易。你可以加入一个第三方parse库或是引入polyfill然后使用处于Living standard的URL API,但如果只是一个简单的应用场景就不值得为此大费周章了,在github上有人分享了这么一个简单快捷的方法:

var parser = document.createElement('a');    
parser.href = "http://example.com:3000/pathname/?search=test#hash";    

parser.protocol; // => "http:"    
parser.hostname; // => "example.com"    
parser.port;     // => "3000"    
parser.pathname; // => "/pathname/"    
parser.search;   // => "?search=test"    
parser.hash;     // => "#hash"    
parser.host;     // => "example.com:3000"    

够简洁的吧?不过这个方法也有几个问题:

  • 只适用于web场景

  • 如果需要解析search部分(问号之后到hash之前的部分)的话,还是需要手动解析

这里贴出我写的解析search部分的代码:

var getSearchParams = function(search) {
  var paramPart = search.substr(1).split('&');
  return paramPart.reduce(function(res, item) {
    parts = item.split('=');
    res[parts[0]] = parts[1];
    return res;
  }, {});
}

它将返回一个{key: value, ..}的对象,方便进一步处理这些参数。

你可能感兴趣的:(JS中解析URL的简单方法)