Trouble with detecting browser language and using it with i18next

Question

I'm working on a webapp. I'm using i18next and it doesn't detect language unless I specify "lng" on options. If I use "navigator.language || navigator.userLanguage" and it's OK with Chrome. It returns something like "en". But Firefox for example, returns "en-GB". I don't use regional translation and i18next doesn't redirect "en-GB" to "en". So, system doesn't work.

Here is my code:

 $(document).ready(function(){ i18next.use(i18nextXHRBackend); i18next.init({ 'debug': true, 'lng': navigator.language || navigator.userLanguage, 'fallbackLng': 'en', 'load': 'currentOnly', 'backend': { loadPath: 'locales/{{lng}}/{{ns}}.json' } }, function() { jqueryI18next.init(i18next, $); $('body').localize(); }); }); 

Answer 1

i18next supports region languages...that's what localization is about.

if you like to support only languages without region set load: 'languageOnly' :

$(document).ready(function(){
  i18next.use(i18nextXHRBackend);
  i18next.init({
      'debug': true,
      'load': 'languageOnly',
      'lng': navigator.language || navigator.userLanguage,
      'fallbackLng': 'en',
      'load': 'currentOnly',
      'backend': {
        loadPath: 'locales/{{lng}}/{{ns}}.json'
      }
  }, function() {
      jqueryI18next.init(i18next, $);
      $('body').localize();
  });
});

this will avoid accepting en-GB for lookups and only use en. Without setting this i18next will still output same result but also try to load en-GB translations.