HTML字符串传URL必须双重编码：先encodeURIComponent(htmlString)，再encodeURIComponent("key="+已编码值)，接收端严格逆序两次decodeURIComponent，否则&、=等会被误解析为参数分隔符导致截断。
直接用 encodeURIComponent() 和 decodeURIComponent()，但必须配对使用、不能混搭；HTML 字符串传 URL 时，单层编码大概率出错，得双重编码。
为什么 encodeURI() 不能用于 HTML 字符串
encodeURI() 会跳过 /、?、&、= 等 URL 保留字符，而 HTML 字符串里常含 <div>、style="color:red" 这类结构——一旦其中的 & 或 = 没被编码，就会被 URL 解析器误认为是查询参数分隔符，导致截断或解析失败。
常见错误现象：
- 接收端
URLSearchParams.get('content')只拿到<strong>abc，后面全丢了 - 浏览器地址栏里看到
?content=%3Cdiv%3E&color=red，但实际只传了content=%3Cdiv%3E
正确做法：一律用 encodeURIComponent() 编码原始 HTML 字符串，它会对所有非字母数字字符（包括 &、=、"、、<code>>）做转义。
立即学习“前端免费学习笔记（深入）”；
HTML 字符串必须双重编码才能安全传递
因为 HTML 字符串本身可能含 &、=，而 URL 查询字符串又以这些字符为结构分隔符——单层编码只能保内容不被破坏，但无法防止它和 URL 自身结构发生语义冲突。
实操建议：
- 发送方：先
encodeURIComponent(htmlString)得到第一层编码值，再把它拼进查询字符串，最后对整个key=value对再次encodeURIComponent() - 接收方：必须严格按相反顺序解码——先
decodeURIComponent()拿到 query 参数值，再对其结果再调一次decodeURIComponent() - 如果跳过第二层编码，
content=%3Cdiv%20id%3D%22test%22%3E会被解析成content=%3Cdiv%20id%3D%22test（%22%3E后面的&被当成分隔符）
示例代码片段：
const htmlString = '<u style="font-size: 60px"><strong>abc</strong></u>';
const encodedHtml = encodeURIComponent(htmlString);
const allQuery = encodeURIComponent(`isResult=true&content=${encodedHtml}`);
const jumpUrl = `second.html?${allQuery}`;
decodeURIComponent() 报错“URI malformed”怎么处理
这是最常遇到的运行时错误，根本原因是传入的字符串不是合法的 URI 编码格式——比如被截断、手动修改过、或只做了一次编码却尝试两次解码。
排查要点：
- 检查 URL 地址栏中对应参数值是否完整，有没有被浏览器或代理自动截断（尤其含长 Base64 或复杂样式时）
- 确认发送端是否真的执行了双重编码；用
console.log(allQuery)看输出是否以多个%开头（如%253Cdiv%253E表示双重编码成功） - 接收端不要对
searchParams.get()的结果直接innerHTML渲染，先 try/catch 包裹解码逻辑 - 避免在服务端（如 Node.js）用
querystring.parse()预解析——它会自动 decode 一次，导致前端再解就报错
在线工具只是临时验证，别依赖它做生产逻辑
很多“HTML URL 编码在线工具”底层直接调 encodeURI() 或没处理嵌套引号，输入 <span class="x"> 就可能漏掉双引号里的内容。更危险的是，它们通常不模拟双重编码流程，也无法还原你实际跳转时的 URL 结构。
真正可靠的方式只有两个：
- 在浏览器控制台用
encodeURIComponent()和decodeURIComponent()手动验证每一步 - 在跳转前后，用
new URL(window.location.href)检查searchParams实际拿到的值是否和你预期一致
最容易被忽略的一点：双重编码后，% 字符本身会变成 %25，再变成 %2525——这不是 bug，是正确行为。只要解码顺序严格匹配，就能还原。
