JS实现多语言网站切换语言时保留当前页面路径

你之前用的简单字符串替换写法存在两个核心问题，导致无法正常生效：

• 无差别替换全URL中所有匹配的en字符，如果页面路径、查询参数甚至域名中带有en相关字符（比如路径/en/english-team），会把非语种位置的字符也替换掉，生成错误路径
• 硬编码了待替换的源语种为en，如果用户当前处于日语、中文页面，代码找不到匹配的en字段，自然无法完成跳转。

针对你站点「语种代码固定为域名后第一段路径」的结构，可以用精准匹配路径段的方式实现，不会出现误替换问题，具体实现如下：

核心跳转函数 #

把这段通用JS代码放到页面公共脚本部分即可：

// 站点支持的所有语种代码，可根据实际业务增减
const SUPPORTED_LANGS = ['en', 'jp', 'zh'];

/**
 * 切换到当前页面对应的语言版本
 * @param {string} targetLang 目标语种代码
 */
function switchLanguage(targetLang) {
  // 拆分当前URL路径，过滤掉拆分产生的空字符串
  const pathParts = window.location.pathname.split('/').filter(segment => segment.length > 0);
  
  // 替换路径第一段的语种标识为目标语种
  pathParts[0] = targetLang;

  // 拼接新地址：保留原路径、查询参数、页内锚点
  const targetUrl = '/' + pathParts.join('/') 
                  + window.location.search 
                  + window.location.hash;
  
  window.location.href = targetUrl;
}

按钮调用方式 #

给每个语言切换按钮传入对应的语种代码即可，不需要为每个按钮单独写跳转逻辑：

<input type="button" onclick="switchLanguage('en')" value="English" />
<input type="button" onclick="switchLanguage('jp')" value="日本語" />
<input type="button" onclick="switchLanguage('zh')" value="中文" />

方案优势 #

• 仅精准替换路径第一段的语种标识，不会误改路径其他位置的同名字符，路径匹配准确率100%
• 不依赖当前页面的语种，无论用户停留在哪个语言版本的页面，点击按钮都能正常跳转
• 自动保留原页面的查询参数、页内锚点，不会丢失页面状态
• 即使用户直接访问域名根路径，代码也能正常生成对应语种的首页地址，不会抛出异常。

内容的提问来源于stack exchange，提问作者IVAN WONG