如何修改window.location及根据locale值调整URL中的语言路径并保留后续路径

我来帮你搞定这个需求！要实现根据locale值替换URL里的语言路径，同时保留后续所有路径的话，用JavaScript就能轻松实现，下面给你两种实用的方法，你可以根据自己的场景选择：

方法1：使用URL API（推荐，更清晰安全） #

现代浏览器都支持URL API，它能把URL拆成各个可操作的片段，处理起来特别省心，不用自己写复杂的字符串拼接或者正则。

具体思路是：

• 先把当前URL转换成URL实例，这样就能直接操作路径、参数等部分
• 把路径按/分割成数组，比如/tr/home分割后会得到["", "tr", "home"]，这里索引1的位置就是我们要替换的语言码
• 替换这个位置为新的locale值，再把数组重新拼成路径
• 最后更新地址栏或者直接跳转

代码示例：

function updateLocaleInUrl(newLocale) {
  // 创建当前页面URL的实例
  const currentUrl = new URL(window.location.href);
  // 把路径拆成一个个片段
  const pathSegments = currentUrl.pathname.split('/');
  
  // 确保路径里有语言片段的位置（避免空路径的情况）
  if (pathSegments.length > 1) {
    // 替换成目标locale
    pathSegments[1] = newLocale;
    // 重新拼接成完整路径
    currentUrl.pathname = pathSegments.join('/');
    
    // 两种更新方式二选一：
    // 1. 直接跳转到新URL（页面会刷新）
    // window.location.href = currentUrl.href;
    // 2. 只更新地址栏，不刷新页面（体验更流畅）
    window.history.replaceState({}, '', currentUrl.href);
  }
}

// 调用示例：切换到土耳其语
updateLocaleInUrl('tr');
// 切换到英语
updateLocaleInUrl('en');

方法2：使用正则表达式（适合兼容旧浏览器） #

如果你的项目需要兼容一些不支持URL API的旧浏览器，或者你更习惯用正则处理字符串，这种方法也很靠谱。

思路是用正则匹配URL路径开头的语言码部分，替换成新的locale，同时保留后面的所有路径内容。

代码示例：

function updateLocaleWithRegex(newLocale) {
  // 正则匹配开头的语言码（这里假设是2位小写字母，比如tr/en，需要的话可以调整正则）
  const localeRegex = /^\/[a-z]{2}\/(.*)$/;
  const currentPath = window.location.pathname;
  
  let newPath;
  if (localeRegex.test(currentPath)) {
    // 如果当前路径符合/[locale]/xxx的结构，替换语言码
    newPath = `/${newLocale}/${currentPath.match(localeRegex)[1]}`;
  } else {
    // 如果当前路径没有语言码（比如直接是/home），自动在开头添加新locale
    newPath = `/${newLocale}${currentPath}`;
  }
  
  // 组合成完整的新URL（包含域名、参数、哈希）
  const newUrl = `${window.location.origin}${newPath}${window.location.search}${window.location.hash}`;
  
  // 同样二选一更新方式：
  // window.location.href = newUrl; // 跳转刷新
  window.history.replaceState({}, '', newUrl); // 仅更新地址栏
}

// 调用示例
updateLocaleWithRegex('en');
updateLocaleWithRegex('tr');

小提醒 #

• 如果你用history.replaceState更新地址栏，记得这个方法不会触发页面刷新，适合单页应用场景；如果是多页应用，用window.location.href跳转更直接。
• 要是你的locale有更长的格式（比如zh-CN这种带地区的），可以把正则调整成/^\/[a-z-]{2,5}\/(.*)$/，适配更多语言码格式。

备注：内容来源于stack exchange，提问作者Havanur