一行代码实现 url parse

Question

实现

解析 url 的各个部分：

http://domain/path/to/?querystring#hash

普通的方法是使用正则来进行匹配，而在前端可以这样：

var parseURL = (function () {
    var a = document.createElement('a');

    /**
     * 解析 url
     * @returns {Object}
     */
    return function (url) {
        a.href = url;

        return {
            protocol: a.protocol,
            host: a.host,
            hostname: a.hostname,
            pathname: a.pathname,
            search: a.search,
            hash: a.hash
        };
    };
}());

测试

parseURL('http://FrontEndDev.org/path/to/?querystring#hash')
// => {"protocol":"http:","host":"frontenddev.org",
"hostname":"frontenddev.org","pathname":"/path/to/",
"search":"?querystring","hash":"#hash"}

原理

A 标签的各个 property 包含了 url parse 的结果信息。同样的，也可以创建一个空的 iframe 来操作它的 contentWindow.location 来实现。