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.