如何使用正则表达式移除URL中的重复GET查询参数

问题原因 #

你原来写的正则没有针对URL参数的键=值结构做匹配，匹配范围太宽导致字符被误吞，自然得不到预期结果。

方案1：纯正则实现 #

针对你给出的示例场景，可以用下面的正则直接匹配重复的参数键值对做删除：

let url = "/courses?category=programming&filter=free&filter=free"
const res = url.replace(/([?&])([^=]+=[^&]+)(?=.*\1\2)/g, '');
console.log(res) // 输出 /courses?category=programming&filter=free

正则逻辑说明：

• ([?&]) 匹配参数前的?或者&分隔符，记为分组1
• ([^=]+=[^&]+) 匹配完整的键=值结构，记为分组2
• (?=.*\1\2) 正向预查，判断后面是否还会出现完全相同的「分隔符+键值对」组合，存在就删除当前匹配的内容，最终只会保留最后一次出现的键值对。

方案2：更稳妥的内置API实现（推荐） #

正则处理URL容易遇到参数值含特殊字符、参数顺序异常等边界问题，用JS原生的URLSearchParams处理鲁棒性更高：

let url = "/courses?category=programming&filter=free&filter=free"
const [path, queryString] = url.split('?');
// 无参数直接返回原地址
if (!queryString) {
  console.log(url);
}
const params = new URLSearchParams(queryString);
const uniqueMap = new Map();
// 遍历参数，重复键只保留最后一个值
for (const [key, value] of params.entries()) {
  uniqueMap.set(key, value);
}
// 拼接最终URL
const res = `${path}?${new URLSearchParams(uniqueMap).toString()}`;
console.log(res) // 输出 /courses?category=programming&filter=free

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