Using Javascript to change website language

Question

I\'m working on a GUI website that can use several languages. The original HTML-files I got to work with were totally static. So if translation was needed I had to parse thr

Answer 1

One of the ways around this might be to use some sort of client-side templating system for your interface. That way you don't need to unnecessarily load your HTML with a bunch of data attributes detailing the language requirements, but just describe it once in the JavaScript and use a couple of functions to assist with the translation. I've coded up quick example below to show you what I mean.

Here's the dictionary object. It contains all the translations by country code. This means you don't need separate dictionaries for each country. This is important because it means we can use this single object structure very easily in out translation function as you'll see in a moment. It also means you can add as many languages and translations as you like.

var dict = {
    en: {
        'Hallo': 'Hallo',
        'Goodbye': 'Goodbye',
        'castle': 'castle'
    },
    fr: {
        'Hallo': 'Bonjour',
        'Goodbye': 'Au revoir',
        'castle': 'chateau'
    },
    de: {
        'Hallo': 'Hallo',
        'Goodbye': 'Auf Wiedersehen',
        'castle': 'schloss'
    }
}

This is our country code and it relates directly to the country code key in our dictionary object:

var lang = 'fr';

The first of our two functions. This takes a template and a language and performs the translation, returning whatever's left (usually some sort of HTML as in our example).

function applyTemplate(tmpl, lang) {

    // find all words within {{word}} a double set of curly braces
    // (this format is similar to the handlebars templating engine)
    var regex = /\{\{([a-zA-Z])\w+\}\}/g

    // for each found word perform the translation and
    // remove the curly braces
    return tmpl.replace(regex, function (word) {
        return translate(dict, lang, word.replace(/[\{\}]/g, ''));
    });
}

The translate function takes the dictionary, the language, and a word and returns the translated word. Note that this is much easier with one object containing all the country translations.

function translate(dict, lang, word) {
    return dict[lang][word];
}

Some HTML. Here is our template (display: none) and the output element. Note the words in the curly braces are the ones to be translated.

{{Goodbye}}, {{castle}}

Finally, putting it all together:

//  grab the template
var tmpl = document.querySelector('.template').textContent;
var translation = document.querySelector('#translation');

// grab our translated html and add it to the output element
var html = applyTemplate(tmpl, lang);
translation.insertAdjacentHTML('afterbegin', html);

DEMO

Now, obviously you don't have to use this method (there are dozens of JS templating engines out there), but templating is particularly useful for sites that need to use multiple languages. Many do this on the back end but, as you can see, it can be easily done client-side too.

Hope this was useful and given you a couple of different ideas on how you might approach your solution.