How Should I Go About Localising An Existing Javascript Web Application?

I have a really tricky task to do: there is an existing web project (2 HTML files, a few plugins, and one main JavaScript file with about 2000 lines of code) which I now have to lo

Solution 1:

I use separate .js files like strings-en.js. I load the .js file dynamically based on settings in my user DB.

Demo: http://jsfiddle.net/ThinkingStiff/uUTkN/

strings-en.js:

var STRINGS = {

    "userLabel": "username",
    "userPlaceholder": "enter username..."//...

};

HTML:

<scriptsrc="strings-en.js"></script><labelid="user-label"for="user"></label><inputid="user" />

CSS:

#user-label::after
{
content: ":";  
}

Script:

document.getElementById( 'user-label' ).textContent = STRINGS.userLabel;
document.getElementById( 'user' ).setAttribute( 'placeholder', STRINGS.userPlaceholder );

Output:

Solution 2:

If you want you translation within your resx files you might want to look at Localize text in JavaScript files in ASP.NET

If you want a pure client side localization you could use jquery.localize