JQuery Extension To Replace Text For Client-Side Internationalization

Internationalization is a customizable jQuery webpage localization plugin that makes it easy to client-side translate any strings within your document.

The compiler package supports AMD, commonjs, commonjs2, and context-specific variable injection (UMD) as an export format: you can use a unit compiler if you want.

Must Read: JavaScript Client-Side HTML Table Sorting Library

How to make use of it:

Installation:

# NPM
$ npm install internationalisation

1. Install and import internationalization into your challenge.

$ npm install internationalisation --save

2. Or embrace the compiled model on the net web page to comply with:

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

3. Add an alternate model of your text as these:

<h1>
  Hello World!
  <!--deDE:Hallo Welt!-->
  <!--frFR:Bonjour le monde!-->
</h1>

4. Create the links to change between languages.

<a href="#language-deDE">de</a>
<a href="#language-enUS">en</a>
<a href="#language-frFR">fr</a>

5. Initialize the plugin with default options.

$(($) => $.Language())

6. Default configuration choices.

$(($) => $.Language({

  // Selector prefix for all nodes to take into account.
  domNodeSelectorPrefix: 'body',

  // Initial language to use
  default: 'enUS',

  // List of all supported languages.
  selection: [],

  // Initial set language (if omitted it will be guest.
  initial: null,

  // Template delimiter to recognize dynamic content.
  templateDelimiter: {pre: '{{', post: '}}'},

  // Indicates whether a fade effect should be performed.
  fadeEffect: true,

  // Saves informations how parent dom nodes should be animated when containing text will be switched.
  textNodeParent: {
      show: [{opacity: 1}, {duration: 'fast'}],
      hideAnimation: [{opacity: 0}, {duration: 'fast'}]
  },

  // Pattern to introduce a pre replacement language node.
  preReplacementLanguagePattern: '^\\|({1})

7. Callback features are accessible.

$(($) => $.Language({

  // Callback which will be triggered after a language switch has been finished.
  onSwitched: this.constructor.noop,

  // Callback which will be triggered after a language check has been performed. 
  // Needed if some nodes have another language active then others. 
  // Useful if only some parts of the dom tree was updated and a full language update isn't required.
  onEnsured: this.constructor.noop,

  // Callback which should be called before a language switch should be performed.
  onSwitch: this.constructor.noop,

  // Callback which should be called before a language switch should be ensured.
  onEnsure: this.constructor.noop,

}))