持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情。

这是我的专栏《前端入门到进阶》，跟HullQin学前端，入门到进阶！带你进大厂！

背景

我们需要解析URL参数

工作中，常常要根据URL排查问题，其中最重要的一步就是解析它的参数，取到关键词，然后才能去前端日志系统搜索。
面试字节跳动和阿里巴巴时，都遇到了这样的面试题：（不许查阅任何API，使用没代码提示的记事本）请手写函数，可以解析URL中的参数。

解决思路

针对上文第一个场景，我们更常见的做法是，搜索「URL解析」，然后找到网上免费的工具，输入URL，能把参数都告诉我，还能帮我decode参数，非常方便。

但是这是存在问题的：

我们把URL参数都暴露给了外网工具，一旦他们这个工具有上报，那么你的URL参数可能就被外网获取了。一旦URL中存有敏感token信息、或者用户个人信息，都容易泄漏，不安全。
很多免费解析的网站很卡，还充斥着广告，体验很差。

当然，这种小工具，肯定也有很多其他开发者自己实现了，但是我是有自己的定制化诉求的，这么简单，不如手撸一个！

所以，我花了一点点时间，完成了开发、部署，效果如下：

如果URL格式错误，也会报错，并保留上次的结果：

网站加载速度很快，没有广告，没有任何依赖，只用了不到100行代码。

解析速度很快，它是纯前端逻辑，不涉及任何后端请求，安全性有保障。

体验地址 & 源码

体验地址: tool.hullqin.cn/url-parser.…

源码: github.com/HullQin/too…

实现方案

核心: 解析URL逻辑

解析URL，其实直接用URL即可。

毕竟解铃还须系铃人，URL规范是W3C定义的，我们用符合规范的工具来解析就好。手写多累呀！

const url = new URL('https://tool.hullqin.cn/url-parser.html?key1=value1&key2&key3=1&key3=2&key3=3&key4=%7C%7C%7C')

运行结果如下：

其中，searchParams是URLSearchParams的实例，可以通过forEach遍历所有参数。

所以，得到url后，就可以这么写，获取我们需要的参数了：

let result = '';
result += `host: ${url.host}\n`;
result += `path: ${url.pathname}\n`;
result += 'params:\n';
url.searchParams.forEach((value, key) => {
  result += `  ${key}: ${value}\n`;
});

交互逻辑: 获取输入

定义好html：

<label for="url">请输入待解析的URL:</label>
<br/>
<textarea id="url"></textarea>

然后获取这个element后，给它添加change事件。每次失去焦点且内容改变后，就会触发。

当用户更改<input>、<select>和<textarea> 元素的值并提交这个更改时，change 事件在这些元素上触发。和 input 事件不一样，change 事件并不是每次元素的 value 改变时都会触发。

const textareaEle = document.getElementById('url');
const urlOnchange = (event) => {
  try {
    const url = new URL(event.target.value.trim());
  } catch {
  }
}
textareaEle.addEventListener('change', urlOnchange);

这里用了trim函数，是为了删除字符串首尾的空白符。

这里加了个try catch。是因为如果你给的参数解析失败new URL会报错，这里不希望控制台报错。

这样交互逻辑就实现啦。

展现逻辑：输出结果

最好把报错输出给用户。
结果需要格式化展现。

所以，结果我们用pre标签展示，空格、换行符不需要转义，也能展示出来。

<div id="message"></div>
<pre id="result"></pre>

const resultEle = document.getElementById('result');
const messageEle = document.getElementById('message');
const setUrl = (newUrl) => {
  url = newUrl;
  console.log(newUrl);
  let result = '';
  result += `host: ${newUrl.host}\n`;
  result += `path: ${newUrl.pathname}\n`;
  result += 'params:\n';
  newUrl.searchParams.forEach((value, key) => {
    result += `  ${key}: ${value}\n`;
  });
  resultEle.innerText = result;
}
const urlOnchange = (event) => {
  try {
    messageEle.innerText = '';
    setUrl(new URL(event.target.value.trim()));
  } catch (e) {
    messageEle.innerText = e.message;
  }
}
textareaEle.addEventListener('change', urlOnchange);

这样，每次输入时，清空报错，然后重新解析URL。如果有错，就展示报错信息在message元素上。如果没错，就展示计算结果，展现在result里。

真好！以后可以用自己的小工具安全快捷的解析URL了！

写在最后

我是HullQin，独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋、UNO等游戏，绝不收费，绝无广告，点这就能开始玩。还独立开发了《合成大西瓜重制版》。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：《教你做小游戏》、《极致用户体验》。

再给专栏《前端入门到进阶》打个广告：跟HullQin学前端，入门到进阶！带你进大厂！欢迎关注～

[JS入门到进阶] 手写解析URL参数的工具，并部署。用起来又快又爽！

背景