如何将有效HTML编码为合法JSON并实现无损解码还原原始内容

首选方案：直接使用JSON.stringify + JSON.parse组合 #

你测试验证的这套方案本身就是符合ECMA标准的通用无损方案，是该场景下的最优解，没有任何额外依赖，性能和可靠性都拉满：

• JSON的字符串类型原生支持全量Unicode字符，JSON.stringify会自动将HTML内容中的双引号、反斜杠、控制字符等JSON敏感字符按照规范转义，全程不会丢失任何原始HTML的字符信息
• 解码时直接调用JSON.parse即可100%还原初始HTML内容，完全覆盖各类标签、特殊符号、多语言字符等场景，和HTML的来源无关

其他方案的问题 #

• encodeURIComponent：属于多余的额外编码步骤，不仅会增加30%左右的传输体积，还多了一层编解码逻辑，容易出现前后端顺序不匹配的问题，没有任何收益
• Base64：除了体积膨胀33%的问题外，不同语言/运行环境的Base64实现对Unicode字符的处理逻辑不一致，非常容易出现乱码，完全不推荐该方案

GraphQL场景适配说明 #

GraphQL基于JSON进行数据传输，你只需要把HTML当成普通字符串字段处理即可，不需要做任何额外的自定义转义，直接将原始HTML传入JSON.stringify生成请求 payload，服务端解析后即可得到完整的原始HTML内容，适配富文本编辑器、数据库、第三方API等所有来源的有效HTML。

示例代码 #

// 编码侧
const rawHTML = '<p>This is <b>bold</b> text & 包含特殊字符 "双引号" \'单引号\' </p>';
const requestPayload = JSON.stringify({
  comment: rawHTML
});

// 解码侧
const parsedData = JSON.parse(requestPayload);
// parsedData.comment 与原始 rawHTML 完全一致

注意事项 #

不要对HTML做任何前置自定义转义（比如提前转义HTML实体），否则会导致重复转义，解码后得到的内容会多出多余的转义字符。

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