手写 URL 解析工具函数

背景

在日常开发中，经常遇到一些需要解析路由参数的场景，这个需求就属于一看就会，一写就废的题目，接下来实现一个解析函数

思路梳理

需要先梳理一下完整的 URL 由哪些部分组成

protocol，比如 http，https，ws，wss
host，比如 localhost、localhost:3000
port，比如 3000
pathname，比如 /test/list
query，比如 ?id=18298
hash，比如 #comment

可以初步观察到一个规律，每一个部分都有其独特的开头标识，比如 query 以问号开头，hash 以井号开头，这样看可能还不明显，先给出本次的用例

const a = "http://baidu.com?query=edu&id=12897#comments";
const b = "http://baidu.com/search?query=edu&id=12897#comments";
const c = "http://baidu.com/search/list?query=edu&id=12897#comments";
const d = "http://baidu.com:8080/search/list?query=edu&id=12897#comments";
const e = "http://baidu.com#comments";
const f = "http://baidu.com?query=edu#comments";
const g = "baidu.com?query=edu#comments";
const arr = [a, b, c, d, e, f, g];

因为有些部分不一定存在，比如 port，query，pathname，hash，所以初步思路是，从前往后解析，每完成一部分的解析，就剔除掉这部分内容

代码实现

先搭建一下初步的框架

const analysisUrl = (url) => {const res = {protocol: "",host: "",port: "",pathname: "",query: "",hash: "",};// ...return res
}

然后第一步是对协议的解析，比较简单，对 url 进行切割，然后赋值，代码如下

if (protocolIndex > -1) {res.protocol = url.slice(0, protocolIndex).toLowerCase();url = url.slice(protocolIndex + 3);}

接下来是比较麻烦的地方，也就是对于 host，port，pathname，query，hash 的切割，因为有些部分可有可无，这样会导致分隔符不同，但是整体思路是从前往后解析，所以，首要任务是，先切割出 host，那么就需要计算出切割结束的下标，由于协议部分已经被移除，所以切割开始下标为 0，无需计算，host 切割结束代码如下

 const slashIndex = url.indexOf("/");const queryIndex = url.indexOf("?");const hashIndex = url.indexOf("#");const hostEnd = Math.min(slashIndex === -1 ? Infinity : slashIndex,queryIndex === -1 ? Infinity : queryIndex,hashIndex === -1 ? Infinity : hashIndex);// 解析 hostif (hostEnd !== Infinity) {res.host = url.slice(0, hostEnd);url = url.slice(hostEnd);} else {res.host = url;url = "";}

该如何理解呢，从上面的用例中可以看到，从 host 开始，最先出现的就是 pathname（port 后续单独分割），然后是 query，最后是 hash，所以可以写出第四行的判断，将这三个分隔符的索引取最小值，无论每个部分存在与否，这个结果一定是 host 的结尾下标，所以可以先分割出 host，顺便计算得出 port，代码如下

 const portIndex = res.host.indexOf(":");if (portIndex > -1) {res.port = res.host.slice(portIndex + 1);}

接下来就是 pathname 的解析，还是一样的套路，此时需要判断 query 和 hash 的分隔符，也就是问号和井号，代码如下

if (url.startsWith("/")) {const queryIndex = url.indexOf("?");const hashIndex = url.indexOf("#");const pathEnd = Math.min(queryIndex === -1 ? Infinity : queryIndex,hashIndex === -1 ? Infinity : hashIndex);if (pathEnd !== Infinity) {res.pathname = url.slice(0, pathEnd);url = url.slice(pathEnd);} else {res.pathname = url;url = "";}}

每次解析完成后，都要记得更新 url 的值，防止对后续的解析产生干扰，接下来是 query 的解析，因为 query 之后，只会存在 hash，所以这次只需要判断当前 url 是否包含井号，代码如下

 if (url.startsWith("?")) {const hashIndex = url.indexOf("#");const queryEnd = hashIndex !== -1 ? hashIndex : url.length ;res.query = url.slice(0, queryEnd);url = url.slice(queryEnd);}

最后来到了 hash 的解析，如果走到这里，而且 url 依然不为空，那么就可以直接得到 hash，代码如下

 if (url.startsWith("#")) {res.hash = url.slice(0);}

到这里，就已经实现了一个包含核心解析逻辑的工具函数，如果在生产环境使用，还需要添加一个特殊情况的校验、处理，完整代码如下

const analysisUrl = (url) => {const res = {protocol: "",host: "",port: "",pathname: "",query: "",hash: "",};const protocolIndex = url.indexOf("://");if (protocolIndex > -1) {res.protocol = url.slice(0, protocolIndex).toLowerCase();url = url.slice(protocolIndex + 3);}const slashIndex = url.indexOf("/");const queryIndex = url.indexOf("?");const hashIndex = url.indexOf("#");const hostEnd = Math.min(slashIndex === -1 ? Infinity : slashIndex,queryIndex === -1 ? Infinity : queryIndex,hashIndex === -1 ? Infinity : hashIndex);// 解析 hostif (hostEnd !== Infinity) {res.host = url.slice(0, hostEnd);url = url.slice(hostEnd);} else {res.host = url;url = "";}// 从 host 中解析端口const portIndex = res.host.indexOf(":");if (portIndex > -1) {res.port = res.host.slice(portIndex + 1);}// 解析 pathnameif (url.startsWith("/")) {const queryIndex = url.indexOf("?");const hashIndex = url.indexOf("#");const pathEnd = Math.min(queryIndex === -1 ? Infinity : queryIndex,hashIndex === -1 ? Infinity : hashIndex);if (pathEnd !== Infinity) {res.pathname = url.slice(0, pathEnd);url = url.slice(pathEnd);} else {res.pathname = url;url = "";}}// 解析 queryif (url.startsWith("?")) {const hashIndex = url.indexOf("#");const queryEnd = hashIndex !== -1 ? hashIndex : url.length ;res.query = url.slice(0, queryEnd);url = url.slice(queryEnd);}// 解析锚点if (url.startsWith("#")) {res.hash = url.slice(0);}return res;
};
const a = "http://baidu.com?query=edu&id=12897#comments";
const b = "http://baidu.com/search?query=edu&id=12897#comments";
const c = "http://baidu.com/search/list?query=edu&id=12897#comments";
const d = "http://baidu.com:8080/search/list?query=edu&id=12897#comments";
const e = "http://baidu.com#comments";
const f = "http://baidu.com?query=edu#comments";
const g = "baidu.com?query=edu#comments";
const arr = [a, b, c, d, e, f, g];
arr.map(analysisUrl);

其他方案

解析 url 当然不止这一种方案，如果追求极致的代码简洁程度，可以使用正则，不过这种方式在面试中，不一定可以一次写对，但是可以证明你的正则能力，代码如下

function parseURL(url) {// 正则表达式匹配 URL 的各个部分const regex = /^(([^:\/?#]+):)?(\/\/([^\/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/;const matches = regex.exec(url);if (!matches) {throw new Error('Invalid URL');}const result = {protocol: matches[2] ? matches[2].toLowerCase() : null, // 协议host: matches[4] || null,                               // 主机和端口hostname: matches[4] ? matches[4].split(':')[0] : null, // 主机名port: matches[4] ? (matches[4].split(':')[1] || null) : null, // 端口pathname: matches[5] || '/',                            // 路径search: matches[6] || '',                               // 查询字符串hash: matches[8] || '',                                 // 片段标识符origin: matches[2] && matches[4] ? `${matches[2]}://${matches[4]}` : null // 原始地址};return result;
}

还有一种借助 a 标签来实现的，也是一种思路，但是局限于环境，代码如下

function parseURL(url) {const parser = document.createElement('a');parser.href = url;const result = {protocol: parser.protocol,       // 协议，例如 "http:"host: parser.host,               // 主机和端口，例如 "zhaowa.com:9000"hostname: parser.hostname,       // 主机名，例如 "zhaowa.com"port: parser.port,               // 端口，例如 "9000"pathname: parser.pathname,       // 路径，例如 "/search/index"search: parser.search,           // 查询字符串，例如 "?query=edu"hash: parser.hash,               // 片段标识符，例如 "#comment"origin: parser.origin            // 原始地址，例如 "http://zhaowa.com:9000"};return result;
}