Localization in a web app using JavaScript and JSON

I'm trying to set up a script to automatically localize a web application. As the web application is intended to use HTML5's offline caching ability, it needs to be able to work offline. As such, JavaScript seems to me to be the best option.

I'd prefer to put all the strings for all localizations in a single JSON file like so:

{
    "en": {
        "application_description": "This is the application's description in English.",
        "application_name": "This is the application's name in English."
    },
    "ja": {
        "application_description": "This is the application's description in Japanese.",
        "application_name": "This is the application's name in Japanese."
    }
}

I was thinking maybe of giving all elements that will be开发者_如何学C localized a custom attribute linking to the intended message (eg: i18n="application_name").

I can retrieve the browser's language using navigator.language, though I think some results will have to be split into just their first section (eg: "en-US" "en-GB" and "en-AU" should all refer to "en").

However, my JavaScript knowledge is basic, and while I've thought about it, I cannot determine how to actually implement this.

Many thanks to anyone who can offer any tips or examples!

You can use Wikimedia's JQuery.i18n.

• Documentation: https://github.com/wikimedia/jquery.i18n/wiki/API
• Demo: http://thottingal.in/projects/js/jquery.i18n/demo/
• Message Syntax: https://github.com/wikimedia/jquery.i18n/wiki/Message-Syntax

http://keith-wood.name/localisation.html

https://github.com/coderifous/jquery-localize

I don't have any personal experience in either but both appear to be fairly well documented.

Depending on your needs, the jquery-localize function might work well. If you need a more complex structure that mirrors that of your website, the localize library might be more useful: https://github.com/kflorence/localize