Javascript for detecting browser language preference

Basics of browser language detection

Detecting browser language involves navigating the navigator object and its properties. The navigator.language property generally reflects the language of the browser User Interface (UI) or content in Firefox.

For browsers like Chrome and Firefox (version 32 and above), an array of user's language preferences, navigator.languages, is available. This aligns with the Accept-Language HTTP header derived from browser settings.

In IE, you can access the system's language setting using window.navigator.browserLanguage or window.navigator.userLanguage, as IE has its proprietary implementations.

Remember, regional variations or dialects may influence the way content is presented to a user. This can be handled by parsing the BCP 47 language tags.

Advanced use cases of language detection

Prioritizing languages and handling fallbacks

Exercise prioritization while checking browser language properties and provide fallbacks in absence of certain properties:

function getFirstBrowserLanguage() {
  var nav = window.navigator,
      // The order of the properties matters!
      browserLanguagePropertyKeys = ['languages', 'language', 'browserLanguage', 'userLanguage'],
      i,
      language;

  // Check all languages in case the user is multilingual
  if (Array.isArray(nav.languages)) {
    for (i = 0; i < nav.languages.length; i++) {
      language = nav.languages[i];
      if (language && language.length) {
        return language; // We found one, no need to check further
      }
    }
  }

  // If we still didn't find a language, let's check other browser properties
  // and return the first one that's available:
  for (i = 0; i < browserLanguagePropertyKeys.length; i++) {
    language = nav[browserLanguagePropertyKeys[i]];
    if (language && language.length) {
      return language;
    }
  }

  // If all else fails, return null. Time to learn Esperanto?
  return null;
}

console.log(getFirstBrowserLanguage()); // logs the first browser language found, or null


Identifying regional language nuances

Keep an eye on regional variations and handle them gracefully:

function getLanguageVariants(languages) {
  return languages.map(lang => lang.split('-')[0]); //language codes are cool, but dialects are cooler!
}

console.log(getLanguageVariants(navigator.languages)); // Who knew there were so many ways to speak English?


Managing user language preferences

In the unlikely event that the user's explicit language preference does not match the browser or system settings, consider giving the user the option to manually select their language in your application. This way, you can store this preference and use it to override the automatic detection:

Best practices in language detection

Robust error handling

You may encounter unexpected scenarios or invalid language tags. Robust error handling strategies helps you stay prepared:

try {
  // Attempt to parse language tags
} catch {
  // Catch anything you didn't anticipate
  // Graceful degradation is a developer's best friend!
}


Employing third-party scripts

If you need to access the Accept-Language header directly but can't due to it being restricted to server-side access, consider a third-party JavaScript or JSONP. Open-sourced scripts such as an AppEngine script available on GitHub provide ready-made solutions.

Staying up-to-date with changing APIs

The ever-evolving nature of web technologies means that browser APIs get updated over time. Try to stay informed of these changes to deliver the most accurate results to your users.