Локализация с помощью JS

114

17 марта 2021, 11:20

Нашел такой код, где уже куча нужных языков и нужный текст

t.default={en:{text:"To access the website content, click Allow!",
    condition:"If you are 18+ tap",approve:"Allow"},az:{text:"Veb saytın məzmununa daxil olmaq üçün, Allow düyməsini basın!",condition:"Əgər 18 + tapsanız",approve:i.az||"İzin ver"},
    sq:{text:"Për të hyrë në përmbajtjen e faqes, kliko Lejoj!",condition:"Nëse je 18+ prekje",approve:i.sq||"Lejoj"},hy:{text:"Մուտք գործելու համար սեղմեք 'Թույլատրել'",
    condition:"Եթե ձեր 18 տարեկանը լրացել է, ապա սեղմեք",approve:i.hy||"Թույլատրել"},af:{text:"Om toegang tot die webwerf-inhoud te verkry, klik op Toestaan!",condition:"As jy 18 + kraan is",
    approve:i.af||"Toelaat"},be:{text:"Каб атрымаць доступ да змесціва сайта, націсніце кнопку Дазволіць!",condition:"Калі вы 18+ кран",approve:i.be||"Дазваляць"},
    bn:{text:"ওয়েবসাইট বিষয়বস্তু অ্যাক্সেস করতে, অনুমতি দিন ক্লিক করুন!",condition:"আপনি যদি 18+ ট্যাপ করেন",approve:i.bn||"অনুমতি দিন"},
    bg:{text:"За достъп до съдържанието на уебсайта, щракнете върху Разреши!",condition:"Ако сте навършили 18+",approve:i.bg||"Разрешавам"},
    cy:{text:"I gael mynediad at gynnwys y wefan, cliciwch ar Ganiatáu!",condition:"Os ydych chi'n tap 18+",approve:i.cy||"Caniatáu"},
    hu:{text:"A webhely tartalmának eléréséhez kattintson a Engedélyezés elemre!",condition:"Ha 18+ tapint vagy",approve:i.hu||"Lehetővé teszi"},
    vi:{text:"Để truy cập nội dung trang web, hãy nhấp Cho phép!",condition:"Nếu bạn 18+ tap",approve:i.vi||"Cho phép"},gl:{text:"Para acceder ao contido do sitio web, faga clic en Permitir!",
    condition:"Se tes máis de 18 anos",approve:i.gl||"Permitir"}

Т.е. из 3 частей состоит Text, Condition, Approve. Мне нужно как-то соединить этот код с html и взависимости от языка браузера в нужных местах подставлять переменные text, condition, approve.

<span class="locale-text">Тут нужно переменную text</span>

Язык браузера я получаю с помощью

var language = window.navigator ? (window.navigator.language ||
              window.navigator.systemLanguage ||
              window.navigator.userLanguage) : "ru";

language = language.substr(0, 2).toLowerCase();

Answer 1

Для js можно сделать так.

<p class="js-locale-content" data-key="text"></p>
<p class="js-locale-content" data-key="approve"></p>

Класс нужен для удобства выборки, data-key указывает какую строку надо вставить

function applyLocaleContent(lang) {
  var locale = t.default[lang];
  if (!locale) {
    return false;
  }
  $('.js-locale-content').each(function(){
    var key = $(this).attr('data-key');
    $(this).text(locale[key]);
  });
}

Бежим по помеченным элементам и вставляем строки в зависимости от data-key

https://jsfiddle.net/skywave/yxhjLpkf/6/