adam bien's blog

Simplest Possible Internationalization with Vanilla JavaScript 📎

DOM elements (li) with language-dependent text are going to be marked with the data-i18 data attributes (or any attribute of your choice):


<ol>
    <li data-i18n>over</li>
    <li data-i18n>under</li>
    <li>duke</li>
</ol>

The internationalized values are maintained in a JavaScript object, which could be loaded from server with fetch as JSON:


const germanConfig = {
    under: "unter",
    over: "ueber"
}

Now the querySelectorAll function can be used to locate DOM elements with language-specific text contents:


const elements = document.querySelectorAll("[data-i18n]");

...and replaced with the following function:


const replaceText = (el) => { 
    const key = el.innerText;
    el.innerText = germanConfig[key] || key;
}    
elements.forEach(el => replaceText(el));

See it in action and "from scratch":

See you at Web, MicroProfile and Java EE Workshops at Munich Airport, Terminal 2 or Virtual Dedicated Workshops / consulting. Is Munich's airport too far? Learn from home: airhacks.io.