Translate Text In Elements Using The i18n-language.js Library

Preview:

Description:

i18n-language.js is a tiny JavaScript internationalization library that allows the user to quickly translate strings in any HTML elements.

Easy to implement with HTML data attributes. Without any JS call.

The library enables a dropdown to switch between languages of your webpage and automatically stores the language selection in the local using the local storage.

How to use it:

1. Load the main JavaScript i18n-language.js at the bottom of the webpage.

<script src="i18n-language.js"></script>

2. Define multiple languages for blocks of text as follows:

<h4 data-lang="de">
  Hallo Welt!
</h4>
<h4 data-lang="en">
  Hello World!
</h4>
<h4 data-lang="fr">
  Bonjour le monde!
</h4>

3. Create a dropdown select to switch between languages. That’s it.

<select id="change-language">
  <option value="en" selected="selected">
    English
  </option>
  <option value="de">
    German
  </option>
  <option value="fr">
    French
  </option>
</select>

Changelog:

v1.0.7 (11/28/2021)

• delete substr(0,2) at lang