根据浏览器语言和地理位置显示特定的div或内容

Question

请向我寻求帮助。我在网上找到了一些想法，他们设法根据访问者的语言创建了一种个性化消息，但是，如果在语言代码之外添加了国家/地区代码，则脚本将失败。

我的目的是根据语言代码“ tag lang”显示一个个性化消息，后跟国家/地区代码以区分某些消息。

例如，对于从美国查看该页面的英语用户，请使用lang =“ en-US”；对于从英国访问该网页的用户，请使用lang =“ en-GB”及其相关的个性化消息。

这是使用的代码：

var known = {
    en: true,
    it: true,
    en-US: true,
};
var lang = ((navigator.languages && navigator.languages[0]) && navigator.language || navigator.userLanguage || 'en').substr(0, 2);
if(!known[lang])
    lang = 'en';
$('div.wrapper[lang=' + lang + ']').show();
$('div.wrapper[lang!=' + lang + ']').hide(); 

<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>

您能帮我吗？

Answer 1

由于SyntaxError不是对象的有效键，因此您将获得en-US: true,。您只需要将其包装在单引号或双引号中即可解决以下问题：

var known = {
    en: true,
    it: true,
    'en-US': true,
};

DEMO：

var known = {
    en: true,
    it: true,
    'en-US': true,
};
var lang = ((navigator.languages && navigator.languages[0]) && navigator.language || navigator.userLanguage || 'en').substr(0, 2);
if(!known[lang])
    lang = 'en';
$('div.wrapper[lang=' + lang + ']').show();
$('div.wrapper[lang!=' + lang + ']').hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 2

非常感谢您的提示！

我试图通过插入标签来修改代码（例如lang =“ en-US”，但它未显示正确的内容。

var known = {
    en: true,
    'it-IT': true,
    'en-US': true,
    'en-GB': true,
};
var lang = ((navigator.languages && navigator.languages[0]) && navigator.language || navigator.userLanguage || 'it-IT').substr(0, 2);

console.log('LANG: ' + lang)

if(!known[lang])
    lang = 'it-IT';
$('div.wrapper[lang=' + lang + ']').show();
$('div.wrapper[lang!=' + lang + ']').hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div lang="en-US" class="wrapper">
    <h1>English US</h1>
    <p>Here is some English content.</p>
</div>

<div lang="en-GB" class="wrapper">
    <h1>English GB</h1>
    <p>Here are some English content from the United States</p>
</div>

<div lang="it-IT" class="wrapper">
    <h1>Italiano</h1>
    <p>Ecco alcuni contenuti in Italiano.</p>
</div>

我还做错了什么？