如何基于访问地区实现静态网站语言自动切换？（纯前端）

嘿，作为JavaScript新手能想到自动根据访问者情况切换语言，这点思路很赞！完全可以纯前端实现，不用后端语言，我给你一步步拆解怎么弄：

首先，你提到的获取地区/语言代码的方向很靠谱，现代浏览器其实自带了获取用户语言偏好的API，相比单纯靠IP判断，它更贴合用户的实际阅读需求（毕竟有人可能在国外但浏览器设置的是母语）。我们可以基于这个来做语言切换，主要分三步：

1. 获取用户的语言偏好代码
2. 准备好各语言的文本数据
3. 根据语言代码替换页面内容

1. 获取用户语言代码 #

用navigator.language（现代浏览器支持）或者navigator.userLanguage（兼容IE）来获取，然后提取前两位的语言码（比如en-US取en，ja-JP取ja）：

function getUserPreferredLang() {
  // 优先取浏览器的语言设置
  const browserLang = navigator.language || navigator.userLanguage;
  // 提取前两位小写的语言码，兼容带地区的格式
  return browserLang.slice(0, 2).toLowerCase();
}

2. 准备多语言文本数据 #

把所有需要切换的文本存在一个对象里，方便调用和扩展：

// 这里可以根据你的需求扩展更多语言和文本条目
const languageData = {
  en: {
    welcomeTitle: "Welcome to My Static Site",
    aboutLink: "About",
    contactLink: "Contact Us",
    introText: "This is a static website built with HTML, CSS and JavaScript."
  },
  ja: {
    welcomeTitle: "私の静的サイトへようこそ",
    aboutLink: "紹介",
    contactLink: "お問い合わせ",
    introText: "これはHTML、CSS、JavaScriptで構築された静的ウェブサイトです。"
  }
};

3. 编写语言切换函数 #

遍历页面上所有标记了语言键的元素，替换成对应语言的文本：

function switchLanguage(targetLang) {
  // 如果目标语言不存在，默认回退到英文
  const activeLangData = languageData[targetLang] || languageData.en;
  
  // 遍历所有带[data-lang-key]属性的元素
  document.querySelectorAll('[data-lang-key]').forEach(element => {
    const textKey = element.getAttribute('data-lang-key');
    // 区分普通文本和输入框占位符的情况
    if (element.tagName === 'INPUT' && element.type === 'text') {
      element.placeholder = activeLangData[textKey];
    } else {
      element.textContent = activeLangData[textKey];
    }
  });
}

4. 页面加载时自动切换 #

在页面DOM加载完成后，自动触发语言切换：

// 页面加载完成后执行自动切换逻辑
document.addEventListener('DOMContentLoaded', () => {
  const userLang = getUserPreferredLang();
  switchLanguage(userLang);
});

5. 调整HTML结构 #

把页面中需要切换的文本替换成带data-lang-key属性的元素（也可以保留默认文本作为降级）：

<header>
  <h1 data-lang-key="welcomeTitle">Welcome to My Static Site</h1>
</header>
<nav>
  <a href="#about" data-lang-key="aboutLink">About</a>
  <a href="#contact" data-lang-key="contactLink">Contact Us</a>
</nav>
<main>
  <p data-lang-key="introText">This is a static website built with HTML, CSS and JavaScript.</p>
  <input type="text" data-lang-key="searchPlaceholder" placeholder="Search...">
</main>

• 关于地理位置判断：如果确实想基于访问地区（而非浏览器语言）切换，纯前端需要调用第三方IP地理定位API，但要注意跨域问题，且这类API通常有请求次数限制。个人更推荐用浏览器语言设置，因为它更符合用户主动设置的阅读偏好。
• 手动切换选项：可以额外加一个语言选择下拉框，给下拉框绑定change事件，调用switchLanguage函数传入选中的语言码，让用户能手动切换语言。
• 资源切换扩展：如果有不同语言的图片（比如本地化logo），可以类似文本的方式，给图片加data-lang-src属性，在switchLanguage函数里替换src属性实现切换。

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