我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发加微信，交友），转载本文需作者HullQin授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。背景当我们需要分析URL参数时，往往要根据URL来排查问题。最重要的一步就是解析它的参数，得到关键字，然后去前端日志系统去搜索。面试字节跳动和阿里巴巴的时候，遇到过这样的面试题：（不查阅任何API，使用记事本，无代码提示）请手写一个函数，可以解析URL中的参数。解决思路对于上面的第一种场景，我们比较常见的做法是搜索“URL分析”，然后在网上找一个免费的工具，输入URL，告诉我所有的参数，帮我解码参数，就是很方便。但是有一个问题：我们已经将URL参数暴露给了外部网络工具。一旦他们举报这个工具，你的网址参数就可能被外网获取。一旦敏感的token信息或用户个人信息存储在URL中，就很容易泄露，不安全。很多免费分析网站很卡，广告满天飞，体验很差。当然，肯定有很多其他开发者实现过这种小工具，但我有自己的定制需求。就这么简单，还不如自己动手做一个呢！所以，我花了一点时间才完成开发和部署。效果如下：URL格式错误会报错，保留上次结果：网站加载速度快，无广告，无任何依赖，只用了不到100行代码。解析速度非常快，纯前端逻辑，不涉及任何后端请求，安全性有保障。体验地址&源码体验地址：https://tool.hullqin.cn/url-parser.html源码：https://github.com/HullQin/tool-hullqin-cn实现方案核心：解析URL逻辑解析URL，其实直接用URL就可以了。毕竟，要解铃铛，必须要用到系铃铛的人。URL规范是由W3C定义的，所以我们可以使用符合规范的工具来分析。手写好累！consturl=newURL('https://tool.hullqin.cn/url-parser.html?key1=value1&key2&key3=1&key3=2&key3=3&key4=%7C%7C%7C')运行结果如下：其中,searchParams是URLSearchParams的一个实例，可以通过forEach遍历所有的参数。所以，得到url之后，可以这样写，得到我们需要的参数：letresult='';result+=`host:${url.host}\n`;result+=`path:${网址。pathname}\n`;result+='params:\n';url.searchParams.forEach((value,key)=>{result+=`${key}:${value}\n`;});交互逻辑：获取input，定义html：
