写点什么

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

作者:HullQin
  • 2022 年 8 月 29 日
    广东
  • 本文字数:2049 字

    阅读完需:约 7 分钟

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

我是 HullQin,公众号线下聚会游戏的作者(欢迎关注公众号,发送加微信,交个朋友),转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏,不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢~我有空了会分享做游戏的相关技术。

背景

我们需要解析 URL 参数

  1. 工作中,常常要根据 URL 排查问题,其中最重要的一步就是解析它的参数,取到关键词,然后才能去前端日志系统搜索。

  2. 面试字节跳动和阿里巴巴时,都遇到了这样的面试题:(不许查阅任何 API,使用没代码提示的记事本)请手写函数,可以解析 URL 中的参数。

解决思路

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


但是这是存在问题的:


  • 我们把 URL 参数都暴露给了外网工具,一旦他们这个工具有上报,那么你的 URL 参数可能就被外网获取了。一旦 URL 中存有敏感 token 信息、或者用户个人信息,都容易泄漏,不安全。

  • 很多免费解析的网站很卡,还充斥着广告,体验很差。


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


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



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



网站加载速度很快,没有广告,没有任何依赖,只用了不到 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')
复制代码


运行结果如下:



其中,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 会报错,这里不希望控制台报错。


这样交互逻辑就实现啦。

展现逻辑:输出结果

  1. 最好把报错输出给用户。

  2. 结果需要格式化展现。


所以,结果我们用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,公众号线下聚会游戏的作者(欢迎关注公众号,发送加微信,交个朋友),转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏,不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢~我有空了会分享做游戏的相关技术。

发布于: 刚刚阅读数: 4
用户头像

HullQin

关注

公众号【线下聚会游戏】 2020.10.07 加入

game.hullqin.cn 我做了一些联机桌游网页:支持2-10人联机的UNO、2-4人联机的斗地主、2人联机的五子棋。无需下载,点开即玩!叫上朋友,即刻开局!不看广告,不做任务,享受「纯粹」的游戏!

评论

发布
暂无评论
[JS入门到进阶] 手写解析URL参数的工具,并部署。用起来又快又爽!_CSS_HullQin_InfoQ写作社区