0

Задумал я тут локализацию сайта, но некоторые моменты приходится делать на js.

Вопрос такой: Необходимо регулярное выражение с помощью которого можно заменить переменные в переменной содержащей html блок, на соответствующие переменные языка.

Имеется переменная содержащая html код который надо вывести на экран. Вот пример.

<div class="width-250">
    <button type="button" class="btn btn-sm btn-primary">{ev_textone}</button>
    <button type="button" class="btn btn-sm btn-primary">{ev_texttwo}</button>
    <button type="button" class="btn btn-sm btn-primary">{ev_other}</button>
</div>

И вот как видите в коде, есть языковые переменные которые в фигурных скобках. Есть языковой файл, который подгружен на странице изначально. Задача изменить фигурные скобки с переменными, на соответствующие слова или фразы из языкового массива.

var lang = {
    ev_textone: "Это поле не должно быть пустым", 
    ev_other: "Длинна этого поля должна быть от 5 до 30 символов", 
    ev_texttwo: "Максимальная длинна этого поля 255 символов", 
    ev_dateright: "Введите дату и время в формате ДД-ММ-ГГГГ ЧЧ:ММ"
    …
}

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

3
  • Где Ваше решение?
    – user207618
    8 мар 2017 в 13:02
  • for (var word in lang) { m[key]=m[key].split('{'+word+'}').join(lang[word]); } мне кажется очень тяжелым вариантом, т.к. языковой файл у меня достаточно большой.
    – Ivan Savin
    8 мар 2017 в 13:05
  • Не по теме, конечно, но слово "длина" пишется с одним "н". :)
    – labris
    8 мар 2017 в 14:07

1 ответ 1

2

let lang = {
  ev_textone: "Это поле не должно быть пустым", 
  ev_other: "Длинна этого поля должна быть от 5 до 30 символов", 
  ev_texttwo: "Максимальная длинна этого поля 255 символов", 
  ev_dateright: "Введите дату и время в формате ДД-ММ-ГГГГ ЧЧ:ММ"
},
  template = `<div class="width-250">
    <button type="button" class="btn btn-sm btn-primary">{ev_textone}</button>
    <button type="button" class="btn btn-sm btn-primary">{ev_texttwo}</button>
    <button type="button" class="btn btn-sm btn-primary">{ev_other}</button>
</div>`;

// Ищем "a-z_"-символы между фигурных скобок
// Если найденная фраза есть в словаре - возвращаем значение, иначе возвращаем найденное
document.body.innerHTML = template.replace(/{\s*([a-z_]+)\s*}/ig, (_, key) => key in lang ? lang[key] : _);

3
  • Спасибо, это именно то, что я хотел.
    – Ivan Savin
    8 мар 2017 в 13:18
  • @IvanSavin, пожалуйста. Спасибо тут выражаются в репутации и, если решено, принятием ответа (галочка слева от ответа).
    – user207618
    8 мар 2017 в 13:20
  • Обязательно поставлю. Я новый пользователь...
    – Ivan Savin
    8 мар 2017 в 13:22

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.