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

2年前 (2022) 程序员胖胖胖虎阿
220 0 0

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

背景

我们需要解析URL参数

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

解决思路

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

但是这是存在问题的:

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

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

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

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

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

[JS入门到进阶] 手写解析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')

运行结果如下:

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

其中,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 噢~我有空了会分享做游戏的相关技术。

相关文章

暂无评论

暂无评论...