A jQuery plugin for doing client-side translations in javascript.

Overview

About

jQuery-i18n is a jQuery plugin for doing client-side translations in javascript. It is based heavily on javascript i18n that almost doesn't suck by Marko Samastur, and is licensed under the MIT license.

Installation

You'll need to download the jQuery library, and include it before jquery.i18n.js in your HTML source. See the examples folder for examples.

This library is also available as a bower component under the name jquery-i18n.

Usage

Before you can do any translation you have to initialise the plugin with a 'dictionary' (basically a property list mapping keys to their translations).

var myDictionary = {
  "some text":      "a translation",
  "some more text": "another translation"
}
$.i18n.load(myDictionary);

Once you've initialised it with a dictionary, you can translate strings using the $.i18n._() function, for example:

$('div#example').text($.i18n._('some text'));

or using $('selector')._t() function

$('div#example')._t('some text');

If you'd like to switch languages, you can unload the current dictionary and load a new one:

$.i18n.load('en');
$.i18n.unload();
$.i18n.load('ja');

Wildcards

It's straightforward to pass dynamic data into your translations. First, add %s in the translation for each variable you want to swap in :

var myDictionary = {
  "wildcard example": "We have been passed two values : %s and %s."
}
$.i18n.load(myDictionary);

Next, pass values in sequence after the dictionary key when you perform the translation :

$('div#example').text($.i18n._('wildcard example', 100, 200));

or

$('div#example')._t('wildcard example', 100, 200);

This will output We have been passed two values : 100 and 200.

Because some languages will need to order arguments differently to english, you can also specify the order in which the variables appear :

var myDictionary = {
  "wildcard example": "We have been passed two values : %2$s and %1$s."
}
$.i18n.load(myDictionary);

$('div#example').text($.i18n._('wildcard example', 100, 200));

This will output: We have been passed two values: 200 and 100.

If you need to explicitly output the string %s in your translation, use %%s :

var myDictionary = {
  "wildcard example": "I have %s literal %%s character."
}
$.i18n.load(myDictionary);

$('div#example').text($.i18n._('wildcard example', 1));

This will output: I have 1 literal %%s character.

Identifying missing translations

When loading the dictionary, you can pass a second missingPattern parameter, which will be used to format any missing translations.

$.i18n.load({ a_key: 'translated string' }, "{{ %s }}");
// The following line will output '{{ another_key }}'
$.i18n._('another_key')

This allows you scan for the given pattern to identify missing translations.

Building From Scratch

Use npm install to install the dependencies, and grunt to run the build.

Change history

  • Version 1.1.2 (2017-08-11) : Add an unload() method to clear the dictionary, support passing a missingPattern when loading the dictionary (thanks to briantani).
  • Version 1.1.1 (2014-01-05) : Use html() instead of text() when rendering translations.
  • Version 1.1.0 (2013-12-31) : Use grunt, update printf implementation, setDictionary is now load (thanks to ktmud).
  • Version 1.0.1 (2013-10-11) : Add bower support.
  • Version 1.0.0 (2012-10-14) : 1.0 release - addition of a test suite (huge thanks to alexaitken), plus a major cleanup.

Bug Reports

If you come across any problems, please create a ticket and we'll try to get it fixed as soon as possible.

Contributing

Once you've made your commits:

  1. Fork jquery-i18n
  2. Create a topic branch - git checkout -b my_branch
  3. Push to your branch - git push origin my_branch
  4. Create a Pull Request from your branch
  5. That's it!

Author

Dave Perrett :: [email protected] :: @daveperrett

Copyright

Copyright (c) 2010 Dave Perrett. See License for details.

Comments
  • Wildcards for dynamic data: Add feature to specify order

    Wildcards for dynamic data: Add feature to specify order

    Hi,

    E.g. japanese does have another word order than e.g. english. Due to this fact, the library should be able to specify the order of dynamic data instead of just replacing %s.

    For example this should be possible:

    'en': {
      'foobar': 'foo %1 bar %2'
    },
    'ja': {
      'foobar': '%2 foo %1 bar'
    }
    
    $.i18n._('foobar', [var1, var2]);
    

    I don't think this is implemented right now, correct?

    -Michael

    opened by mweibel 3
  • Change language in javascript runtime

    Change language in javascript runtime

    Hello,

    I'd like to know if it's posible to change the language at runtime, without refreshing the page.

    I load the dictionary this way: $.i18n.load('es');

    And, if the user changes the language, I'd like to do something like: $.i18n.unload('es'); $.i18n.load('en');

    If this possible?

    Thanks!

    opened by oscarml 2
  • Fix version in bower.json

    Fix version in bower.json

    Curerntly bower warns when installing with: mismatch Version declared in the json (1.1.0) is different than the resolved one (1.1.1).

    This upgrades the version declaration in bower.json too.

    opened by bvleur 2
  • global modifier in regex pattern

    global modifier in regex pattern

    Using numbered wildcards consecutively like so: '%1$s enabled %2$s %3$s' occasionally causes a match to miss, this results in the actual wildcard being displayed in the UI. After logging just about everything in the library, I decided to omit the 'global' modifier in the regex pattern on line 71 and viola, problem solved.

    I can't find too much information on when it's ok to NOT use the global modifier, but this guy (http://stackoverflow.com/a/1222089) thinks it's ok.

    This is my first time reporting an issue on github so I apologize in advance if it's not by the books.

    opened by johnnysainz 2
  • HTML support

    HTML support

    Currently there is no way to include newlines, bold, italics or other common HTML tags since all translations are treated as text and applied using the .text() method in JQuery. It would be nice to have an option on the $.i18n object that could tell the plugin to assume all translations contain HTML code and apply it using .innerHtml()

    It would also make sense to have a variation on the _t() shortcut that can do this on a selective basis. Perhaps __t() with two underscores, or _th().

    opened by Soviut 2
  • load dynamic dictionnary with json

    load dynamic dictionnary with json

    Hello is it possible to use jquery with a dictionary i18n load with ajax json? exemple: var json = $.getJSON('/json/test.json'); $.i18n.setDictionary(json); Should he do anything in particular to use a dynamic dictionary?

    opened by gtraxx 2
  • (well a question) does this only change innerHTML of an element?

    (well a question) does this only change innerHTML of an element?

    as the title says.

    If you wonder why would anyone modify anything other than innerHTML, think about <input type="button" value="text to display"></input>.

    opened by user670 1
  • Wildcard bug?

    Wildcard bug?

    I'm not sure if i'm doing everything right but this is what's happening:

    var my_dictionary = {
        "text_and_wildcard": "%s and %s"
    }
    var text1 = "text1";
    var text2 = "text2";
    
    $("#target").text($.i18n._("text_and_wildcard", [text1, text2]));
    
    // Outputs: "s and text1text2"
    

    if i change the dictionary for:

    var my_dictionary = {
        "text_and_wildcard": " %s and %s " // Whitespace before the first %s
    }
    
    // Outputs: "text1 and text2" as expected
    

    Looks like there's a parsing error at the beginning of the string

    Version: 0.9.2 (201204070102)

    opened by darthpolly 1
  • Fix incorrect behavior if a string that begins with %s is passed to printf

    Fix incorrect behavior if a string that begins with %s is passed to printf

    Example:

    $.i18n.printf("%s and %s are fun", ["foo", "bar"]);

    Before:

    "s and foo are funbar are fun"

    After:

    "foo and bar are fun"

    Reason:

    In line 121 this test returns true because the lastIndexOf returns -1 because there is no %s in the empty string and this value matches its length (0) minus 1:

    tS[i].lastIndexOf('%') == tS[i].length-1

    opened by eikes 1
  • fix issue #3 by adding support for the standard sprintf way of replacing numbered wildcards

    fix issue #3 by adding support for the standard sprintf way of replacing numbered wildcards

    I'm not sure if there isn't any better way on how to do it, but it works this way quite good.

    I already updated the VERSION although I'm not sure if you really want that ;)

    • Michael
    opened by mweibel 1
  • Add union two and more dictionaries

    Add union two and more dictionaries

    To be able to add multiple dictionaries. $.i18n.setDictionary(my_dictionary);

    setDictionary: function(i18n_dict) { if (this.dict == null) { this.dict = i18n_dict; } else { $.extend(this.dict, i18n_dict); } },

    opened by newage 0
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Fast and minimal JS server-side writer and client-side manager.

unihead Fast and minimal JS <head> server-side writer and client-side manager. Nearly every SSR framework out there relies on server-side components t

Jonas Galvez 24 Sep 4, 2022
Easy server-side and client-side validation for FormData, URLSearchParams and JSON data in your Fresh app 🍋

Fresh Validation ??     Easily validate FormData, URLSearchParams and JSON data in your Fresh app server-side or client-side! Validation Fresh Validat

Steven Yung 20 Dec 23, 2022
Picky is a jQuery plugin that provides simple client-side date validation when entering dates using select tags.

jquery.picky.js Picky is a jQuery plugin that provides simple client-side date validation when entering dates using select tags. Features Instead of g

Patrick Crowley 5 Apr 25, 2021
This plugin allows side-by-side notetaking with videos. Annotate your notes with timestamps to directly control the video and remember where each note comes from.

Obsidian Timestamp Notes Use Case Hello Obsidian users! Like all of you, I love using Obsidian for taking notes. My usual workflow is a video in my br

null 74 Jan 2, 2023
This Plugin is For Logseq. If you're using wide monitors, you can place journals, linked references, and journal queries side by side.

Logseq Column-Layout Plugin Journals, linked references, and journal queries can be placed side by side if the minimum screen width is "1850px" or mor

YU 14 Dec 14, 2022
This repository serves as a starter kit for doing simple TDD exercise

This repository serves as a starter kit for doing simple TDD exercise

adylanrff 3 Feb 19, 2022
Chris Siku 13 Aug 22, 2022
A declarative way of doing asynchronous programing with Typescript.

Deasyncify A declarative way of doing asynchronous programing with Typescript. Overview Getting started Issues Installation Usage Methods watch watchA

Joseph Tsegen 4 Jun 19, 2022
Cindy Dorantes 12 Oct 18, 2022
Make drag-and-drop easier using DropPoint. Drag content without having to open side-by-side windows

Make drag-and-drop easier using DropPoint! DropPoint helps you drag content without having to open side-by-side windows Works on Windows, Linux and Ma

Sudev Suresh Sreedevi 391 Dec 29, 2022
This is an application that entered the market with a mobile application in real life. We wrote the backend side with node.js and the mobile side with flutter.

HAUSE TAXI API Get Started Must be installed on your computer Git Node Firebase Database Config You should read this easy documentation Firebase-Fires

Muhammet Çokyaman 4 Nov 4, 2021
T3 is a client-side JavaScript framework for building large-scale web applications

Box has migrated using react, webpack, and the latest version of ECMAScript for our frontend projects as of 2018. We no longer support chan

Box 1.6k Dec 8, 2022
A Javascript library to export svg charts from the DOM and download them as an SVG file, PDF, or raster image (JPEG, PNG) format. Can be done all in client-side.

svg-exportJS An easy-to-use client-side Javascript library to export SVG graphics from web pages and download them as an SVG file, PDF, or raster imag

null 23 Oct 5, 2022
A vanilla javascript library to generate Avataaars on the client or server side!

Use the awesome Avataaars Library by Pablo Stanley (avataaars.com) in any javascript application. This Project uses parts of the Dicebear Avatars Libr

Hannes Bosch 26 Dec 4, 2022
JavaScript client-side HTML table sorting library with no dependencies required.

TABLE-SORT-JS. Description: A JavaScript client-side HTML table sorting library with no dependencies required. Demo Documentation. (work in progress)

Lee Wannacott 32 Dec 14, 2022