HTML字符串通过URL传递解析时被截断，如何解决？

问题根源 #

你犯了两个关键错误：

1. 发送端错误编码整个查询串：把包含&参数分隔符的整个字符串做encodeURIComponent，导致URL无法识别参数边界；后续接收端解码后，&被还原，直接把富文本里的内容拆成了新参数。
2. 接收端错误提前解码整个URL：先解码window.location.href再传给URL对象，会让富文本里的转义引号（"）提前还原成"，触发URL解析时的截断逻辑。

正确解决方案 #

1. 发送端：单独编码每个参数值，而非整个查询串

推荐用URLSearchParams自动处理编码，避免手动拼接出错：

// 构建参数对象
const queryParams = new URLSearchParams();
queryParams.append('isResult', 'true');
queryParams.append('content', htmlString);
// 生成跳转URL
const jumpUrl = `${secondPageUrl}?${queryParams.toString()}`;

如果不想用URLSearchParams，也可以手动单独编码每个参数值：

const encodedContent = encodeURIComponent(htmlString);
const allQuery = `isResult=true&content=${encodedContent}`;
const jumpUrl = `${secondPageUrl}?${allQuery}`;

2. 接收端：直接用原始URL解析参数，不要提前解码

直接用URLSearchParams或URL对象处理原始的window.location.search或href：

// 方法1：用URLSearchParams直接解析查询串
const params = new URLSearchParams(window.location.search);
const content = params.get('content');

// 方法2：用URL对象处理完整href
const url = new URL(window.location.href);
const content = url.searchParams.get('content');

为什么原来的代码会截断？ #

你原来的发送端把isResult=true&content=${htmlString}整个编码，&会被转成%26，此时URL里的查询串是一个整体。但接收端先解码整个href，%26变回&，同时富文本里的"解码成"，URL解析器会把font-family: "里的"当成参数值的结束符，直接截断后面的内容，导致你只拿到一半HTML。

用正确的编码方式后，富文本里的特殊字符（比如"、&）都会被转成URL安全的编码，接收端解析时会自动还原成原始内容，不会出现截断。

内容的提问来源于stack exchange，提问作者linjunchao