基于URL特定字符串的JavaScript随机重定向实现咨询

你的思路完全没问题！这段代码已经能实现核心需求了，不过我们可以做一些优化让它更简洁、健壮，同时补全你没写完的部分。

先看你写的原始代码：

if(window.location.href.indexOf('specialstring1') > -1) {
  if(Math.random() > 0.5) {
    window.location.href = "/versionA" + document.location.search;
  } else {
    window.location.href = "/versionB" + document.location.search;
  }
} else if(window.location.href.indexOf('specialstring2') > -1) {
  if(Math.random() > 0.5) {
    window.location.href = "/versionA" + document.location.search;
  } else {
    window.location.href = "/versionB" + document.location.search;
  }
}

优化后的代码 #

我们可以把重复的跳转逻辑封装成函数，同时增加一些健壮性处理：

// 封装通用的随机跳转函数
function redirectToRandomVersion() {
  // 保留原URL的查询参数
  const searchParams = window.location.search;
  // 50%概率分配到versionA或versionB
  const targetUrl = Math.random() > 0.5 ? `/versionA${searchParams}` : `/versionB${searchParams}`;
  
  // 防止循环跳转：如果当前已经在目标页面，就不再触发跳转
  if (!window.location.pathname.startsWith('/versionA') && !window.location.pathname.startsWith('/versionB')) {
    window.location.href = targetUrl;
  }
}

// 检查当前URL是否包含指定的特殊字符串
const currentUrl = window.location.href;
if (currentUrl.includes('specialstring1') || currentUrl.includes('specialstring2')) {
  redirectToRandomVersion();
}

优化点说明 #

• 封装复用逻辑：把重复的跳转代码抽成函数，后续新增更多特殊字符串时，只需要在判断条件里添加即可，不用重复写跳转逻辑
• 更直观的字符串判断：用includes()替代indexOf() > -1，代码可读性更高，ES6+完全支持，现代浏览器都没问题
• 防循环跳转：避免用户已经在versionA/B页面时，因为URL仍包含特殊字符串（比如查询参数里带的）导致无限跳转
• 模板字符串拼接：比传统的加号拼接更清晰，减少语法错误概率

额外扩展建议 #

如果后续需要针对不同的特殊字符串设置不同的跳转目标（比如specialstring2要跳转到versionC和versionD），可以修改函数为更通用的版本：

function redirectToRandom(targetPaths) {
  const searchParams = window.location.search;
  // 随机选中一个目标路径
  const randomIndex = Math.floor(Math.random() * targetPaths.length);
  const targetUrl = `${targetPaths[randomIndex]}${searchParams}`;
  
  // 检查当前是否已经在目标页面，避免循环
  if (!targetPaths.some(path => window.location.pathname.startsWith(path))) {
    window.location.href = targetUrl;
  }
}

// 针对不同特殊字符串配置不同跳转目标
const currentUrl = window.location.href;
if (currentUrl.includes('specialstring1')) {
  redirectToRandom(['/versionA', '/versionB']);
} else if (currentUrl.includes('specialstring2')) {
  redirectToRandom(['/versionC', '/versionD']);
}

注意事项 #

• 建议把这段代码放在页面的<head>标签最顶部（DOM加载前执行），避免页面加载后再跳转造成视觉闪烁
• 如果需要兼容IE10及以下的老浏览器，把includes()换回indexOf() > -1，模板字符串换回加号拼接即可

内容的提问来源于stack exchange，提问作者Max Di Campo