Отображение заданных c делений или содержимого на основе языка браузера и географического положения c

Question

Пожалуйста, я прошу вашей помощи. Я нашел некоторые идеи в Интернете, и им удалось создать своего рода персонализированное сообщение, основанное на языке посетителя, однако сценарий завершился неудачей, если код страны добавлен в дополнение к коду языка.

Мое намерение слишком далеко показать персонализированное сообщение на основе языкового кода «tag lang», за которым следует код страны для дифференциации некоторых сообщений.

Например, используйте lang = "en-US" для пользователей в Engli sh, которые просматривают страницу из США и используйте 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

Большое спасибо за подсказку!

Я пытался изменить код, вставив тег (например, 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>

Что еще я делаю не так?