JavaScript中如何实现符合规则的URI字符串编码与通用解码？

你需要的编码效果是application/x-www-form-urlencoded格式的标准编码，和原生encodeURIComponent/encodeURI的输出差异主要在空格的处理规则上，不需要逐字符替换，用标准API加少量规则适配就能实现通用的编解码。

编码实现 #

encodeURI()是用来编码完整URI的，不会转义域名、路径分隔符等URI结构字符，不适合编码参数片段；escape()是已废弃的非标准API，对非ASCII字符会转成%uXXXX格式的非标准结果，处理西里尔字母等非ASCII字符时必然不符合预期。
正确的编码逻辑只需要两步：

• 调用标准encodeURIComponent()处理所有特殊字符、非ASCII字符，这一步会把单引号、西里尔字母等字符正确转为%XX格式的编码，空格会被编码为%20
• 把所有%20替换为+，就和你给出的示例效果完全一致

function urlEncode(str) {
  return encodeURIComponent(str).replace(/%20/g, '+');
}

效果验证：

• 输入Capitan's Hat，输出Capitan%27s+Hat
• 输入Сhristmas Hat，输出%D0%A1hristmas+Hat

解码实现 #

反向解码不需要逐字符写替换规则，对应编码逻辑反向处理即可：

• 先把字符串里所有的+替换回%20，因为标准解码API默认不会把+识别为空格
• 调用标准decodeURIComponent()统一处理所有%XX格式的编码，不管是ASCII特殊字符还是多字节非ASCII字符都能正确还原为原字符

function urlDecode(str) {
  return decodeURIComponent(str.replace(/\+/g, '%20'));
}

效果验证：

• 输入Capitan%27s+Hat，输出Capitan's Hat
• 输入%D0%A1hristmas+Night，输出Сhristmas Night

提示：所有符合x-www-form-urlencoded规则的字符串都可以用这两个方法通用处理，不需要针对特定字符单独写替换逻辑。

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