decodeURIComponentSafe转义%问题记录URI malformed

decodeURIComponentSafe转义%问题记录

问题背景

当我们解析包涵 % 字符的字符串时，会出现错误如下 Uncaught URIError: URI malformed

解决方案：

function decodeURIComponentSafe(s) {if (!s) {return s;}return decodeURIComponent(s.replace(/%(?![0-9][0-9a-fA-F]+)/g, '%25'));
}

上述代码说明

1. 输入检查if (!s) { return s; }：
   这行代码检查输入参数 s 是否为假值（如 null、undefined 或空字符串）。如果是，则直接返回该值。这可以防止在后续处理中出现错误。
2. 替换无效编码 s.replace(/%(?![0-9][0-9a-fA-F]+)/g, '%25')：
   这部分使用正则表达式查找所有不合法的百分号编码。具体来说，它寻找所有以 % 开头但后面没有跟随两个十六进制数字（0-9，a-f或A-F）的情况。
   对于找到的每个无效百分号，替换为 %25，即将其转义为合法的百分号字符。这是因为 %25 是字符 % 的有效编码形式。
3. 解码 return decodeURIComponent(...)：
   最后，调用 JavaScript 原生函数 decodeURIComponent() 对经过替换处理的字符串进行解码。这个函数会将合法的百分号编码转换回其原始字符。

功能概述

该函数的主要功能是：

• 安全解码：在解码 URI 组件时，避免因无效的百分号编码导致的错误。
• 处理特殊字符：通过将不合法的百分号替换为合法形式，使得解码过程更加稳健。

使用场景

在处理用户输入或从 API 接收数据时，URI 中可能包含无效的百分号编码。使用 decodeURIComponentSafe 可以确保在解码时不会因为这些无效字符而导致程序崩溃。

示例

假设我们有一个 URI 字符串：

let encodedString = "Hello%20World%ZZ"; // 无效编码 %ZZ
let decodedString = decodeURIComponentSafe(encodedString);
console.log(decodedString); // 输出: "Hello World%ZZ"

在这个例子中，函数能够处理无效编码并返回结果，而不是抛出错误。

---