乐趣区

关于前端:JS入门到进阶-手写解析URL参数的工具并部署用起来又快又爽

jiezi

我是 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 噢～我有空了会分享做游戏的相干技术。

退出移动版