本文详解如何在 JavaScript Bookmarklet 与浏览器控制台中统一处理 URL 编码换行符 %0A，避免因原始字符被解析为实际换行而破坏代码结构，并提供安全、可复用的 encodeURIComponent 增强方案。
本文详解如何在 javascript bookmarklet 与浏览器控制台中统一处理 url 编码换行符 `%0a`，避免因原始字符被解析为实际换行而破坏代码结构，并提供安全、可复用的 `encodeuricomponent` 增强方案。
在开发通用型 Bookmarklet（即同时支持粘贴至浏览器地址栏执行和直接在 DevTools 控制台运行的脚本）时，一个常见却易被忽视的陷阱是：URL 编码中的 %0A 在 Bookmarklet 环境下会被浏览器提前解析为真实换行符，从而导致 JavaScript 语法错误（如 Unexpected token ILLEGAL），而该代码在控制台中却能正常运行——因为控制台直接执行 JS 字符串，不经过 URL 解析阶段。
根本原因在于：Bookmarklet 的 javascript: 协议 URI 必须是单行有效 URL。当代码中出现未转义的 %0A（即换行符的百分号编码），浏览器在解析 URI 时会将其还原为 \n，进而将后续代码“折行”，破坏函数闭包或语句结构。例如：
// ❌ 危险写法：直接拼接 '%0A' —— Bookmarklet 中会变成真实换行 body: 'message=' + encodeURIComponent(text) + '%0A&other=1'
虽然尝试双重编码（如 'message=' + encodeURIComponent(text) + '%250A'）可让 Bookmarklet 正常工作，但该字符串在控制台中会被 JS 引擎按字面量解析，%250A 不会被自动解码为 %0A，最终导致服务端收到的是字面字符串 %250A 而非换行符，API 解析失败。
✅ 正确解法是：使用 decodeURI('%250A') 动态生成 %0A 字符。
'%250A' 中的 %25 是 % 的 URL 编码，decodeURI('%250A') 安全返回字符串 '%0A'（注意：是字符串 %0A，不是换行符 \n）。该字符串在 Bookmarklet 中被浏览器解析为字面量 %0A（不会触发换行），而在控制台中作为 JS 表达式执行时，同样得到字面量 %0A，完美统一行为。
以下是优化后的 encodifyText 函数（含健壮性增强）：
var encodifyText = function(txt) {
if (!txt || typeof txt !== 'string') return '';
const lines = txt.split('\n');
let result = '';
for (let i = 0; i <blockquote>
<p>✅ 优势说明：</p>
<ul>
<li>decodeURI('%250A') 返回字符串 "%0A"，在 Bookmarklet 和控制台中语义完全一致；</li>
<li>避免了 slice(0, -3) 这类硬编码长度裁剪（易因编码后长度变化出错），改用逻辑判断（仅在非末行追加）；</li>
<li>增加空值与类型校验，提升鲁棒性；</li>
<li>语义清晰：明确表达“每行之间插入 %0A”，而非“拼完再删”。</li>
</ul>
</blockquote><p>此外，还需注意以下关键实践：</p>
- 禁止在 Bookmarklet 中使用原始换行符 \n 或模板字符串多行：所有逻辑必须压缩为单行（工具如 Terser 可辅助）；
- encodeURIComponent 已足够处理换行：它会将 \n 编码为 %0A，因此通常无需手动拼接 %0A；本例特殊在于需在 & 参数分隔前保留 %0A 作为消息内容的一部分，而非参数键名；
- 服务端需正确 decode：确保后端使用标准 URLDecoder（如 Java 的 URLDecoder.decode(..., "UTF-8")）解析 %0A 为 \n；
- 调试技巧：在 Bookmarklet 开头添加 console.log('DEBUG:', encodeURI('test\nline')); 并检查控制台输出，验证编码逻辑是否符合预期。
综上，通过 decodeURI('%250A') 替代硬编码 %0A，配合逻辑化拼接与输入防护，即可一劳永逸地解决 Bookmarklet 与控制台双环境下的换行符兼容问题，让你的工具脚本真正「一次编写，随处运行」。
