[JS入门到进阶]|[JS入门到进阶] 手写解析URL参数的工具，并部署。用起来又快又爽！
我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。背景 我们需要解析URL参数
- 工作中，常常要根据URL排查问题，其中最重要的一步就是解析它的参数，取到关键词，然后才能去前端日志系统搜索。
- 面试字节跳动和阿里巴巴时，都遇到了这样的面试题：（不许查阅任何API，使用没代码提示的记事本）请手写函数，可以解析URL中的参数。
针对上文第一个场景，我们更常见的做法是，搜索「URL解析」，然后找到网上免费的工具，输入URL，能把参数都告诉我，还能帮我decode参数，非常方便。
但是这是存在问题的：
- 我们把URL参数都暴露给了外网工具，一旦他们这个工具有上报，那么你的URL参数可能就被外网获取了。一旦URL中存有敏感token信息、或者用户个人信息，都容易泄漏，不安全。
- 很多免费解析的网站很卡，还充斥着广告，体验很差。
所以，我花了一点点时间，完成了开发、部署，效果如下：
![[JS入门到进阶]|[JS入门到进阶] 手写解析URL参数的工具，并部署。用起来又快又爽！](http://img.readke.com/220907/0R31JU1-0.jpg)
文章图片
如果URL格式错误，也会报错，并保留上次的结果：
![[JS入门到进阶]|[JS入门到进阶] 手写解析URL参数的工具，并部署。用起来又快又爽！](http://img.readke.com/220907/0R31IE9-1.jpg)
文章图片
网站加载速度很快，没有广告，没有任何依赖，只用了不到100行代码。
解析速度很快，它是纯前端逻辑，不涉及任何后端请求，安全性有保障。
体验地址 & 源码 体验地址: https://tool.hullqin.cn/url-parser.html
源码: https://github.com/HullQin/tool-hullqin-cn
实现方案 核心: 解析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')运行结果如下：
![[JS入门到进阶]|[JS入门到进阶] 手写解析URL参数的工具，并部署。用起来又快又爽！](http://img.readke.com/220907/0R31L5b-2.jpg)
文章图片
其中，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：
然后获取这个element后，给它添加
change事件。每次失去焦点且内容改变后，就会触发。当用户更改、和