在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, ..}的对象,方便进一步处理这些参数。