URL 编解码工具

URL 编解码工具

项目简介

URL 编解码工具是一款零依赖的纯前端编码工具，专治 URL 处理中各种「中文乱码」与「参数看不懂」的烦恼。一个面板做编解码：把任意文本编码成 percent 编码（%E4%BD%A0），或把编码还原成原文；另一个面板做参数解析：把一段 QueryString 拆成清晰的参数名 / 原始值 / 解码后值三列表格。全程浏览器本地完成，打开即用。

整个应用由单个 HTML 文件承载，零依赖、零后端，打开即用。

核心功能

• URL 编码：三种转义模式一键切换——encodeURIComponent 组件编码（推荐，转义全部非字母数字字符）、encodeURI 结构编码（保留 :/?# 等 URL 结构字符）、full 全量转义（仅保留 ASCII 字母数字）。

• URL 解码：宽松模式把连续百分号字节收集后按 UTF-8 一次性还原，中文、Emoji 零乱码；对不完整的编码片段也不报错，而是原样保留。

• 一键交换：编码结果与输入互换，立即回到原文，方便复制回填。

• QueryString 解析：输入 ?name=小明&age=18 即拆出参数表，自动去除 ? 与 # 锚点，展示原始值和解码后值。

• 即时统计：输入 / 输出字符数实时统计，转换异常就地提示。

技术架构

应用采用「输入与模式层 → 转义引擎 → 结果展示层」的简洁三层结构，全部运行在浏览器端，无后端依赖。

• 输入与模式层：编码 / 解码双 Tab 切换；转义模式下拉、宽松解码开关、交换按钮统一收集配置；文本域承载输入输出。

• 转义引擎：组件编码模块用 encodeURIComponent 转义全部保留字符；结构编码模块用 encodeURI 保留 URL 骨架；全量转义模块自实现「仅保留 ASCII 字母数字」的字符级扫描；宽松解码模块按 %XX 收集字节，交给 TextDecoder('utf-8') 一次性还原。

• 结果展示层：输出框展示转换结果并支持复制；字符数统计与异常提示实时刷新；参数解析面板以三列表格呈现键值明细。

核心逻辑说明

全量转义：fullEncode(str) 逐字符遍历，利用 codePointAt 判断码点是否落在 ASCII 字母数字区间，否则交给 encodeURIComponent 转义——既保证最大可读性，又完整处理中文与 Emoji 的多字节码点。

宽松解码：decodeText(text, loose) 在宽松模式下扫描字符串，把连续的 %XX 序列累积进字节数组，遇非百分号字符或越界片段先冲刷字节数组（用 TextDecoder('utf-8') 解码为字符）再拼接原文。这样 %E4%BD%A0%E5%A5%BD 能还原成「你好」，而单个残缺 %E4 也不会触发异常。

参数解析：parseQS() 先剥离 ? 前缀与 # 锚点，按 & 切分键值对，对每个键值分别做宽松解码，最后渲染成「参数 / 原始值 / 解码后值」表格；空键与重复键均正常展示。

技术栈

使用方式

直接用浏览器打开 index.html 即可使用；也可通过任意静态文件服务器托管后访问。

项目地址：开发者作品展览馆

亮点与价值

• 零依赖、开箱即用：单个 HTML 文件承载全部能力，部署只需一个静态服务器。

• 中文零乱码：宽松解码基于 UTF-8 字节流还原，中英文与 Emoji 往返一致。

• 模式清晰：三种编码语义（组件 / 结构 / 全量）标注明确，适合不同场景选用。

• 实用细节：参数一键解析成表、输入输出一键互换、字符数实时统计，覆盖前端联调与数据抓取的真实痛点。