本文介绍一种轻量、可复用的前端方案：利用当前 URL 路径中的语言文件夹名（如 /English/ → /Francais/），通过点击语言链接自动跳转至对应语言版本页面，无需硬编码每个链接。
本文介绍一种轻量、可复用的前端方案：利用当前 url 路径中的语言文件夹名（如 `/english/` → `/francais/`），通过点击语言链接自动跳转至对应语言版本页面，无需硬编码每个链接。
在构建双语（或多语）网站时，若英文与法文页面结构严格对称（例如 https://example.com/English/products.html ↔ https://example.com/Francais/products.html），手动维护每页的语言跳转链接不仅繁琐，还极易出错。此时，可通过纯前端 JavaScript 实现路径中语言标识的智能替换，大幅提升可维护性。
核心思路
利用 window.location.pathname 获取当前路径（不含协议和域名），再通过 String.prototype.replace() 将当前语言文件夹名（如 "English"）精确替换为目标语言名（如 "Francais"）。关键在于：
- 用 <body id="English"> 或 <body id="Francais"> 显式声明当前页面语言；
- 所有语言切换链接统一绑定事件，动态读取目标语言 ID 并执行路径替换。
完整实现代码（推荐通用写法）
<!-- 所有页面共用此结构（仅 body.id 需按实际语言修改） -->
<body id="English">
<nav class="switcher">
<a href="#" data-lang="English" class="lang-link">English</a> |
<a href="#" data-lang="Francais" class="lang-link">Français</a> |
<a href="#" data-lang="Japanese" class="lang-link">日本語</a>
</nav>
<main>
<!-- 页面内容 -->
</main>
</body>
<script>
document.addEventListener('DOMContentLoaded', () => {
const langLinks = document.querySelectorAll('.lang-link');
const currentLang = document.body.id;
langLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const targetLang = this.dataset.lang;
// ⚠️ 注意：replace() 仅替换第一个匹配项，确保语言文件夹名唯一且不嵌套
const newPath = window.location.pathname.replace(currentLang, targetLang);
// 使用 top.location.href 确保跨 iframe 场景下正确跳转
top.location.href = newPath;
});
});
});
</script>关键注意事项
- ✅ 路径结构要求：语言文件夹名必须是完整路径段（如 /English/about.html），且在所有页面中位置一致；避免使用 replace() 替换子串（如 "Eng" → "Fra"），否则可能误改其他路径部分。
- ✅ 大小写敏感："English" 与 "english" 视为不同字符串，需确保 body.id 和 data-lang 值严格一致。
- ⚠️ 404 风险：脚本不校验目标页面是否存在，建议配合服务端路由或静态文件生成工具（如 Hugo、Jekyll）保证双语页面一一对应。
- ? 增强建议：可结合 localStorage 记住用户上次选择的语言，并在页面加载时自动重定向（需服务端支持或 SPA 架构）。
该方案零依赖、兼容所有现代浏览器，适用于静态站点或传统 PHP/ASP.NET 页面，是快速实现多语言导航的高效实践。
