Tiny jQuery Plugin For Client-side Page Translation - xtr.js

File Size: 5.7 KB
Views Total: 1401
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Tiny jQuery Plugin For Client-side Page Translation - xtr.js

xtr.js is a really small jQuery plugin for client side internationalization that allows to translate text strings in the languages you provide.

Basic usage:

1. Load the minified version of the xtr.js plugin after loading jQuery JavaScript library:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.xtr.min.js"></script>

2. Add the 'xtr' or 'data-xtr-key' to the strings you want to translate when needed.

<div xtr>Welcome</div>
<div xtr>Hello</div>
<div data-xtr-key="bye">Good Bye</div>

3. Create your own translation data in the JavaScript as these:

var data = {
    "Welcome": {
        de: "Willkommen",
        fr: "Bienvenue",
        es: "Bienvenido"
    "bye": {
        de: "Auf Wiedersehen",
        fr: "Au revoir",
        es: "Adiós"
    "Hello": {
        de: "Hallo",
        fr: "Allô ?",
        es: '¡Hola!'

4. Initialize the plugin and set the default language you want to use.

  t: data,
  default: 'en'

5. Translate the specific strings after init.

  t: data,
  default: 'en',
  lang: 'fr'

6. Translate the specific strings manually.


7. Reset the language.


8. Specify the escaped special characters using REGX.

  regExp: {
      '': /\s/g,
      '_': /[&<>"'`\/=]/g

Change log:


  • Fixed error if translations are missing

This awesome jQuery plugin is developed by melbon. For more Advanced Usages, please check the demo page or visit the official website.