Translate Strings In Any Elements & Attributes Using Vanilla JS | Simple Translator

Simple Translator is an extremely lightweight solution (less than 9 kB) for translating content using pure JavaScript. Node JSnatively works in the browser. Simple client-side translation using pure JS.

More Features:

  • Translate individual sentences
  • Translate complete HTML pages
  • Easily bring in JSON resource files (contain your translations)
  • Take advantage of general assistant functions
  • Automatically discover the user’s preferred language

How to make use of it:

Install & Download:

# Yarn
$ yarn add @andreasremdt/simple-translator

# NPM
$ npm i @andreasremdt/simple-translator --save

1. Import the simple-translator library.

// ES Module
import Translator from '@andreasremdt/simple-translator';

// Or from a CDN
<script src="https://unpkg.com/@andreasremdt/[email protected]/dist/umd/translator.min.js" defer
></script>

2. Define translations (key/value pairs) in JSON records data and place them into the i18n folder.

// en.json
{
  "title": "Title",
  "content": "Content"
  ...
}

3. Add the data-i18n attribute to the component you need to have a number of languages as follows:

<h1 data-i18n="title">Title</h1>
<h1 data-i18n="content">Content</h1>

4. It additionally permits you to translate values in any attribute:

<div data-i18n=".label"
     data-i18n-attr="title"
     title="to be translated...">
     Title
</div>

5. Initialize the library.

var translator = new Translator({
    // options here
});
translator.fetch(['en']).then(() => {
  translator.translatePageTo('en');
});

6. Switch between languages.

translator.load("en");
translator.load("de");

7. Translate strings in a customized HTML attribute:

<div
  data-i18n="title"
  data-i18n-attr="title"
  title="Title..."
>
  ...
</div>

8. Determine whether to retailer the final selected language within the native storage. Default: false.

var translator = new Translator({
    persist: true,
    persistKey: 'preferred_language'
});

9. Specify the file path the place the JSON records data are positioned.

var translator = new Translator({
    filesLocation: "/i18n"
});

10. Determine the default language. Default: empty.

var translator = new Translator({
    defaultLanguage: "de"
});

11. Auto determines the user’s desired language.

var translator = new Translator({
    detectLanguage: true
});

12. Override the default selector.

var translator = new Translator({
    selector: '[data-i18n]'
});

13. Determine whether or not to register the helper globally.

var translator = new Translator({
    registerGlobally: '__'
});

14. API strategies.

// Translates a single translation string into the desired language.
translator.translateForKey(String: key, String?: language);

// Translates all DOM elements that match the selector ('[data-i18n]' by default) into the specified language.
translator.translatePageTo(String?: language);

// Registers a new language to the translator.
translator.add(String: language, Object: translation);

// Removes a registered language from the translator.
translator.remove(String: language);

// Fetches either one or multiple JSON files from your project by utilizing the Fetch API.
translator.fetch(String|Array: languageFiles, Boolean?: save)

// Gets the current language
translator.currentLanguage

language translator javascript code for a website, Tagging elements for translation, simple-translator Github


See Demo And Downloa

Official Website(andreasremdt): Click Here

This superior jQuery/javascript plugin is developed by andreasremdt. For extra Advanced Usages, please go to the official website.

Related Posts

vuejs-dialog-plugin

Vuejs Lightweight Prompt Based On Promise And Confirm Dialog

VUEJS DIALOG PLUGIN is a lightweight, promise-based, prompt, and dialog-based alert. Important updates The dialog will always be resolved by an object. (ie a callback to continue…

browser-alert-confirm-dialog-alert4html-js

Insert HTML Into Your Browser Alert & Confirm Dialog | alert4html.js

alert4html.js is a JavaScript library that enables you to insert HTML directly into your browser alerts while simulating Chrome alerts as well. alert4html.js is an alternative to…

Lightweight-Flexbox-Carousel-Plugin

Simple and Lightweight Flexbox Carousel Plugin With JavaScript | flexCarousel.js

Flexbox Responsive Slider – flexCarousel.js plugin is a simple and lightweight plug-in from Flexbox carousel ES6 JavaScript. An unofficial fork by Slick Carousel. Flex Carousel is a…

bootstrap-5-multi-level-dropdown

Multi-Level Dropdown Works With Bootstrap 5

Bootstrap 5 Multi-Level Dropdown, using the official HTML without adding additional CSS styles and classes, it’s just like the original support. Not all of the things listed…

jquery-confirmation-dialog

JQuery UI Built Dynamic Modal That Uses Bootstrap | confirm.js

confirm.js is to use confirm modal created using JQuery and Bootstrap. Put events in each custom button in your web application. Easy to implement, saves time. Requirements…

bootstrap-responsive-navbar

[Bootstrap 5] Responsive Navbar With off-canvas Display on Mobile

The Bootstrap 5-off-canvas navigation menu is a responsive navigation system that combines BS5 components outside of the canvas and navbar. Must Read: Pure CSS Mobile-friendly Responsive Table…