必须用 encodeURIComponent 而非 encodeURI，因后者不编码 &、=、?、/ 等保留字符，易致 URL 截断；需防抖处理 input 事件、校验空输入、限制长度、兼容复制失败、必要时双重编码。
直接用 encodeURIComponent 和 decodeURIComponent 就能做出可用的在线工具，但必须处理好空输入、长文本、复制失败、编码嵌套这四类实际问题。
为什么不能只靠 encodeURI 做参数编码
它会放过 &、=、?、/ 这些 URL 保留字符，而 HTML 字符串里常含 <div id="a"> 或 style="color:red"——只要其中的 & 或 = 没被转义，浏览器解析时就会把它们当成查询参数分隔符，导致截断。比如传 ?content=<div>&color=red，后半截根本收不到。
常见错误现象：
-
URLSearchParams.get('content')只拿到<div>，后面全丢了 - 地址栏显示
?content=%3Cdiv%3E&color=red，但服务端只收到content=%3Cdiv%3E
正确做法：一律用 encodeURIComponent 编码原始值，它会对所有非字母数字字符（包括 <、>、"、&）做转义。
立即学习“前端免费学习笔记（深入）”；
input 事件监听要加防抖，否则卡顿明显
用户每敲一个键就触发一次 encodeURIComponent，长文本或复杂 HTML（比如带内联样式和 script 标签的富文本）会让 JS 主线程持续忙于编码，页面响应变慢，尤其在移动端。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操建议：
- 用
setTimeout+clearTimeout实现 200ms 防抖，避免高频计算 - 对空输入或纯空白字符串，直接清空结果区，不调用编码函数
- 超过 10KB 的输入，截断并提示“内容过长，已截取前 10000 字符”
复制功能必须兼容 navigator.clipboard.writeText 失败场景
这个 API 要求页面处于安全上下文（HTTPS 或 localhost），且用户有过交互（如点击、按键）才能调用。直接 onload 就执行会报 NotAllowedError。
实操建议：
- 复制按钮绑定
click事件，而非自动触发 - 捕获
writeText的 reject，fallback 到document.execCommand('copy')（仅限旧版 Safari） - 复制成功后用
setTimeout清除按钮上的 “Copied!” 提示，避免残留
双重编码不是默认选项，而是 HTML 字符串跨页传递的刚需
如果工具只是做“字符串 → 编码”展示，单层 encodeURIComponent 够用；但若生成跳转链接（比如 second.html?data=xxx），而 xxx 是 HTML 片段，则必须双重编码。
原因很实在：第一层编码产出的 %3Cdiv%3E 本身含 %，而 % 在 URL 中是合法字符，不会被截断；但第二层编码会把 % 变成 %25，确保整个字符串作为单个 query 值完整抵达接收页。
容易被忽略的关键点：
- 发送端：先
encodeURIComponent(htmlString)，再拼进key=value，最后对整个key=value再调一次encodeURIComponent - 接收端：必须严格逆序解码——先
decodeURIComponent()拿到 query 值，再对其结果再调一次decodeURIComponent() - 调试时看地址栏：双重编码成功的值一定以
%25开头（如%253Cdiv%253E），否则说明漏了一层
