JavaScript i18n

How to Create an Internationalisation System Using JavaScript

by Ciprian Popescu

HTML

<span id="i18n" class="hidden" data-key-one="My first string" data-key-two="My second string" data-key-three="My third string"></span>

<div id="my-id">This should be translated and replaced with <code>key2</code> variable.</div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Segoe UI Symbol", "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 14px;
  line-height: 1.5;
  color: #24292e;
  background-color: #fff;
  padding: 24px;
}

.hidden {
  display: none;
}

JavaScript

function camelCase(string) {
  return string.toLowerCase().replace(/(\-[a-zA-Z])/g, function($1) {
    return $1.toUpperCase().replace('-', '');
  });
}

function translate(dataAttribute) {
  let element = document.querySelector('#i18n'),
    dataAttributeCamelCase = camelCase(dataAttribute),
    string = element.dataset[dataAttributeCamelCase];

  string = (string.length) ? string : '';

  return string.toString();
}

document.querySelector('#my-id').innerHTML = translate('key-two');