https://github.com/rwdai/url_encode_edit

一个托管在 GitHub Pages 上的纯前端 URL 结构化编辑器。你只需粘贴一个 URL（可包含编码），页面会自动拆解成协议、域名、端口、路径以及逐个 Query 参数，所有字段都可独立修改，随时重新生成 URL。
https://github.com/rwdai/url_encode_edit

github-pages url-encoder

Last synced: about 1 month ago
JSON representation

一个托管在 GitHub Pages 上的纯前端 URL 结构化编辑器。你只需粘贴一个 URL（可包含编码），页面会自动拆解成协议、域名、端口、路径以及逐个 Query 参数，所有字段都可独立修改，随时重新生成 URL。

• Host: GitHub
• URL: https://github.com/rwdai/url_encode_edit
• Owner: RWDai
• License: mit
• Created: 2025-12-03T11:28:17.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2025-12-03T12:18:18.000Z (7 months ago)
• Last Synced: 2025-12-29T07:36:51.530Z (6 months ago)
• Topics: github-pages, url-encoder
• Language: JavaScript
• Homepage: https://rwdai.github.io/Url_Encode_Edit/
• Size: 13.7 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# URL Encode Edit

一个托管在 GitHub Pages 上的纯前端 URL 结构化编辑器。你只需粘贴一个 URL（可包含编码），页面会自动拆解成协议、域名、端口、路径以及逐个 Query 参数，所有字段都可独立修改，随时重新生成 URL。

## 功能亮点

- 💡 实时解析：输入框内容一更新就尝试解析，如缺少协议会自动补全 `https://` 并给出提示。

- 🧱 结构化字段：协议/域名/端口/路径使用独立控件呈现，避免逐字符编辑的痛苦。

- ✏️ Query 表单：每个参数对应两个输入框（键和值），支持 Emoji、中文等，实时同步。

- 📏 智能输入框：Value 区域会随内容自动增高，长文本也能舒适编辑。

- ♻️ 双向绑定：修改任意字段立即重建 URL；直接手写 URL 时，也会反向刷新所有控件。

- 🌓 自适应样式：默认支持浅/深色模式，直接发布到 GitHub Pages 即可。

## 快速开始

1. 克隆或下载本仓库。

2. 双击 `index.html` 或使用任意静态服务器（如 `npx serve .`）打开。

3. 粘贴 URL，例如 `https://demo.example.com:8080/api/%E8%B5%84%E6%BA%90?name=%E5%BC%A0%E4%B8%89&description=%F0%9F%93%88+Docs&redirect=https%3A%2F%2Fexample.org%2Fcallback`，立即得到结构化视图。

## 主要交互

- **填入示例**：点击“填入示例”按钮快速回到演示 URL。

- **基础部分**：修改协议、域名、端口、路径时，顶部输入框实时更新。

- **Query 参数**：每个参数都是一行，可输入/删除；新增按钮用于添加空行。

- **状态提示**：解析或生成失败会在输入框下方显示错误信息（例如域名为空）。

## 文件结构

- `index.html`：页面结构，包含 URL 输入区、基础字段和 Query 参数区域。

- `styles.css`：响应式卡片布局及暗/亮主题、表单控件、Query 行等样式。

- `main.js`：核心逻辑，负责解析 URL、维护状态、渲染字段、双向同步以及辅助提示。

## 部署到 GitHub Pages

1. 推送源码到 GitHub 仓库。

2. 在仓库的 **Settings → Pages** 中选择 `Deploy from a branch`，分支选 `main`（或你的默认分支），目录保持 `/`。

3. 保存后等待构建完成，就能通过分配的 URL 访问该工具。

欢迎根据自己的需求拓展，比如：支持批量导入参数、导出链接、校验端口范围等功能。