Как сделать локализацию через js/json/php файлы?

Question

[Владислав]

На сайте есть блок, например с id="example"
в файле lang-ru.js/php/json есть строка example='Привет';
в файле lang-en.js/php/json есть строка example='Hello';
в языковых файлах локализация должна быть записана именно в таком виде,
а в самом HTML эти блоки пустые, как сделать чтобы в них подгружались слова в зависимости от выбранного языка
(такой пример использует вк vk.com/js/lang0_0.js?6672)

Answer 1

[Mikhail Osher]

Предположим, у нас где-то есть локализация.

App.lang = 'ru'; // app = вымышленный объект

Затем надо всем элементам проставить директивы

<span class="client__title" data-translate="client_title"></span>

Не знаю, какие JS инструменты Вы используете - сделаем пример на jQuery.

$(function() {
  var file = '/locale/' + App.lang + '.json';
  
  // Тут предположим, что response = есть содержимое файла
  $.get(file).then(function (response) {
    // Идем по всем файлам и заменяем контент
    $('[data-translate]').each(function () {
      var $elem = $(this),
          locKey = $elem.data('translate');
        
      // Если ключ найден  
      if (response[locKey]) {
        $elem.html(response[locKey]);
      }
    });
  });
});

Comments

[Владислав]

а без angular и jquery как-то можно?

[Владислав]

и через id

[Mikhail Osher]

Владислав: да, тут всё то же самое делается через XMLHttpRequest и document.querySelectorAll

[Владислав]

Mikhail Osher: ((, а можно как-то вот так , подскажи как это сделать

[Владислав]

Mikhail Osher: html lang="ru"

Answer 2

[IceJOKER]

А что сложного?
Загружаете json файл, далее идете по каждому элементу json файла и на ходу меняет, как то так:
$('#' + id_from_json).text(text_from_json);
лучше не id, а пользоваться data-lang="example" , или как на - developer.android.com/intl/ru/training/index.html

Answer 3

[xmoonlight]

Язык (код) - берете из заголовка браузера Accept-Language или из сессии (если юзер сменил) и грузите сразу нужный файл.

Comments

[Владислав]

определить нужный язык не проблема, нудно сделать способ вывода массива в id/class блоки

[xmoonlight]

Владислав: формируйте сразу на сервере перед отдачей страницы

[Владислав]

xmoonlight: как

[xmoonlight]

через массив