请求修复：基于带地区码的浏览器语言显示指定div的脚本

嘿，我来帮你搞定这个问题！你当前的脚本失效的原因很明确：你用了substr(0,2)把获取到的语言码直接截断成前两位了——比如en-US会被改成en，自然就匹配不到你设置的lang="en-US"的内容块啦。

我们调整一下逻辑，优先匹配完整的语言标识（含地区码），如果找不到对应的配置，再回退到仅语言码的匹配，最后兜底用默认的en。下面是修改后的完整代码：

修改后的JavaScript代码 #

var known = { en: true, it: true, 'en-US': true };
// 获取完整的用户语言标识
var fullLang = navigator.languages?.[0] || navigator.language || navigator.userLanguage || 'en';
var lang = fullLang;

// 先检查完整语言码是否在已知列表中
if (!known[lang]) {
  // 如果不在，截取前两位的语言码再检查
  lang = fullLang.substr(0, 2);
  // 如果还是不在，用默认值en
  if (!known[lang]) {
    lang = 'en';
  }
}

// 显示匹配的内容，隐藏其他内容
$('div.wrapper[lang="' + lang + '"]').show();
$('div.wrapper[lang!="' + lang + '"]').hide();

对应的HTML（无需修改） #

<div lang="en" class="wrapper">
 <h1>English</h1>
 <p>Here is some English content.</p>
</div>
<div lang="it" class="wrapper">
 <h1>Italiano</h1>
 <p>Ecco alcuni contenuti in Italiano.</p>
</div>
<div lang="en-US" class="wrapper">
 <h1>English United States</h1>
 <p>Here are some English content from the United States</p>
</div>

逻辑说明 #

• 第一步先获取用户的完整语言标识（比如en-US、it-IT）
• 优先校验完整语言码是否在你的known配置里，如果存在就直接用它
• 如果完整语言码不在配置中，再截取前两位的语言码（比如it-IT变成it）进行校验
• 最后如果都没有匹配的，就 fallback 到默认的en

测试场景验证 #

• 当用户语言是en-US时，会显示lang="en-US"的内容块
• 当用户语言是en-GB（不在known里）时，会回退显示lang="en"的内容块
• 当用户语言是it-IT时，会显示lang="it"的内容块
• 当用户语言是fr-FR（不在known里）时，会默认显示lang="en"的内容块

内容的提问来源于stack exchange，提问作者Gabriele C.