如何忽略无效URL参数，正确提取包含&符号的url参数值

原生URLSearchParams会默认把所有&符号识别为参数分隔符，不符合你要保留url参数内&的需求，因此需要调整解析逻辑，优先拆分固定的slug参数，剩余内容全部归为url参数值，具体实现如下：

实现代码 #

// 提取原始查询串，移除开头的?字符
const rawSearch = window.location.search.slice(1);
let targetUrl = '';
let customSlug = '';

// 查找slug参数的起始位置
const slugFlagIndex = rawSearch.indexOf('&slug=');
if (slugFlagIndex !== -1) {
  // 提取slug值，跳过&slug=的6位字符长度
  customSlug = rawSearch.slice(slugFlagIndex + 6).trim();
  // 截取slug之前的内容，去掉开头的url=前缀即为原始url参数内容
  const rawUrlContent = rawSearch.slice(0, slugFlagIndex).replace(/^url=/, '');
  targetUrl = decodeURIComponent(rawUrlContent).trim();
} else {
  // 无slug参数的场景，直接提取url参数值
  targetUrl = decodeURIComponent(rawSearch.replace(/^url=/, '')).trim();
}

方案说明 #

• 所有出现在&slug=之前的&符号都会被保留为url参数的一部分，完全匹配需求
• 无需调整传入参数的编码规则，用户直接拼接带&的原始链接即可正常识别
• 解析得到的targetUrl和customSlug可直接按照原有逻辑调用Short.io API，无需修改后续流程

兼容优化（可选） #

如果存在slug参数后还有其他无关参数的场景，可以将slug提取逻辑替换为正则匹配：

const slugMatch = rawSearch.match(/&slug=([^&]*)/);
if (slugMatch) {
  customSlug = slugMatch[1].trim();
  const rawUrlContent = rawSearch.replace(slugMatch[0], '').replace(/^url=/, '');
  targetUrl = decodeURIComponent(rawUrlContent).trim();
}

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