常见面试题 - URL 解析

本文源自以前面试的时候频繁要求手写 url parse ，故针对此种状况专门写一文来简述如何解析 URL ，若是您有更好的解析方法或题型变种欢迎讨论

注意，本文仅讨论开头所列出的一种格式，还没有讨论 URL 的更多格式，更多符合规范的格式（如使用相对路径等的状况）详见：tools.ietf.org/html/rfc398…

URL 是啥样的

首先让咱们看看一种完整的 URL 是长什么样的： <scheme>://<user>:<password>@<host>:<port>/<path>;<params>?<query>#<frag>

若是这样太抽象了，那么咱们举个例子具体化一下： https://juanni:miao@www.foo.com:8080/file;foo=1;bar=2?test=3&miao=4#test

组件	描述	默认值
scheme	访问服务器获取资源时使用的协议	无	https
user	访问资源时使用的用户名	无（匿名）	juanni
password	用户的密码，和用户名使用:分割	E-mail	miao
host	资源服务器主机名或IP地址	无	www.foo.com
port	资源服务器监听的端口，不一样的scheme有不一样的默认端口（HTTP使用80做为默认端口）	和scheme有关	8080
path	服务器上的资源路径。路径与服务器和scheme有关	默认值	/file
params	在某些scheme下指定输入参数，是键值对。能够有多个，使用;分割，单个内的多个值使用, 分割	默认值	foo=1;bar=2
query	该组件没有通用的格式，HTTP中打多使用&来分隔多个query。使用?分隔query和其余部分	无	test=3&miao=4
frag/fragment	一小片或一部分资源名称。引用对象时，不会将fragment传送给服务器，客户端内部使用。经过#分隔fragment和其他部分	无	test

因为 path parameter 是 path 的一部分，所以咱们将其归为 path 中

同时，若是要表示哪些部分是可选的，则能够表示为： [scheme:]//[user[:password]@]host[:port][/path][?query][#fragment]

如何获取每一个组件

咱们先不考虑组件内部的数据，先获取每一个组件

让浏览器帮咱们解析 - URLUtils

先介绍一个偷懒的方式： URLUtils ，能够经过该接口获取 href 、 hostname 、 port 等属性。

在浏览器环境中，咱们的 a 标签，也就是 HTMLAnchorElement 实现了 URLUtils 中定义的属性，那么就能够用以下代码得到每一个组件了

/** * @param {string} url * 利用 URLUtils 简单解析 URL * @returns {protocol, username, password, hostname, port, pathname, search, hash} */
function URLParser(url) {
    const a = document.createElement('a');
    a.href = url;
    return {
        protocol: a.protocol,
        username: a.username,
        password: a.password,
        hostname: a.hostname, // host 可能包括 port, hostname 不包括
        port: a.port,
        pathname: a.pathname,
        search: a.search,
        hash: a.hash,
    }
}
复制代码

缺点：

• 依赖浏览器宿主环境接口

使用 URL 对象

上面使用 a 标签的方法在 Node 环境中就失效了，可是咱们还有其余方法可让底层 API 帮咱们解析 —— URL

/** * @param {string} url * 利用 URLUtils 简单解析 URL * @returns {protocol, username, password, hostname, port, pathname, search, hash} */
function URLParser(url) {
    const urlObj = new URL(url);
    return {
        protocol: urlObj.protocol,
        username: urlObj.username,
        password: urlObj.password,
        hostname: urlObj.hostname,
        port: urlObj.port,
        pathname: urlObj.pathname,
        search: urlObj.search,
        hash: urlObj.hash,
    }
}
复制代码

老老实实手撸一个

那要是面试官要老老实实的手撸，那也只能对着撸了：

function parseUrl(url) {
    var pattern = RegExp("^(?:([^/?#]+))?//(?:([^:]*)(?::?(.*))@)?(?:([^/?#:]*):?([0-9]+)?)?([^?#]*)(\\?(?:[^#]*))?(#(?:.*))?");
    var matches =  url.match(pattern) || [];
    return {
        protocol: matches[1],
        username: matches[2],
        password: matches[3],
        hostname: matches[4],
        port:     matches[5],
        pathname: matches[6],
        search:   matches[7],
        hash:     matches[8]
    };
}
parseUrl("https://juanni:miao@www.foo.com:8080/file;foo=1;bar=2?test=3&miao=4#test")
// hash: "#test"
// hostname: "www.foo.com"
// password: "miao"
// pathname: "/file;foo=1;bar=2"
// port: "8080"
// protocol: "https:"
// search: "?test=3&miao=4"
// username: "juanni"
复制代码

这个正则确实有点难懂，不过相信有一些基础的话加上下面两张图仍是能够理解：

解析 search(query) 部分

偷懒使用 URLSearchParams

/** * @param {string} search 相似于 location.search * @returns {object} */
function getUrlQueyr(search) {
    const searchObj = {};
    for (let [key, value] of new URLSearchParams(search)) {
        searchObj[key] = value;
    }
    return searchObj;
}
复制代码

优势：

• 不须要手动使用 decodeURIComponent
• 会帮着把 query 上的 + 自动转换为空格（单独使用 decodeURIComponent 作不到这点）（至于什么状况把 空格 转换为 + ，什么状况把空格转换为 %20，能够参考这里等）
• 不支持如 array[] / obj{} 等形式

再手撸一个（残缺版）

要求：

• 对于非法字符不予解析
• 对于形如 list[] 的解析成数组
• 对于形如 obj{} 的解析为对象（暂时只须要用 JSON.parse 进行解析）

/** * @param {string} query 形如 location.search * @returns {object} */
function parseQueryString(query) {
    if (!query) {
        return {};
    }
    query = query.replace(/^\?/, '');
    const queryArr = query.split('&');
    const result = {};
    queryArr.forEach(query => {
        let [key, value] = query.split('=');
        try {
            value = decodeURIComponent(value || '').replace(/\+/g, ' ');
            key = decodeURIComponent(key || '').replace(/\+/g, ' ');
        } catch (e) {
            // 非法
            console.log(e);
            return;
        }
        const type = getQuertType(key);
        switch(type) {
            case 'ARRAY':
                key = key.replace(/\[\]$/, '')
                if (!result[key]) {
                    result[key] = [value];
                } else {
                    result[key].push(value);
                }
                break;
            case 'JSON': 
                key = key.replace(/\{\}$/, '')
                value = JSON.parse(value);
                result.json = value;
                break;
            default:
                result[key] = value;
        }
        
    });
    return result;
    function getQuertType (key) {
        if (key.endsWith('[]')) return 'ARRAY';
        if (key.endsWith('{}')) return 'JSON';
        return 'DEFAULT';
    }
}

const testUrl = 
'?name=coder&age=20&callback=https%3A%2F%2Fmiaolegemi.com%3Fname%3Dtest&list[]=a&list[]=b&json{}=%7B%22str%22%3A%22abc%22,%22num%22%3A123%7D&illegal=C%9E5%H__a100373__b4'
parseQueryString(testUrl)
复制代码

固然，这里还并不严谨，没有考虑到以下问题

1. 相同字段如何处理
2. 没有替换 + 为
3. 只有 key
4. 只有 value
5. 没有解析相对路径
6. 更深刻的解析 Object

最后，这里推荐一个开源库：url-parse，对各类状况处理的比较好，同时这也意味着实现上略复杂，理解便可，面试中更需结合充分理解面试官要求进行解答与扩展

参考

• 【读】这一次,让咱们再深刻一点 - URL你是否真的了解?
• path-parameter-syntax
• URLUtils
• URL
• URLSearchParams