JavaScript for detecting browser language preference

Question

I have been trying to detect the browser language preference using JavaScript   If I set the browser language in IE in Tools gt Internet Options gt General gt Languages  how do I read this value using JavaScript   Same problem for Firefox  I m not able to detect the setting for tools gt options gt content gt languages using navigator language   Using  navigator userLanguage    it detects the setting done thru Start gt ControlPanel gt RegionalandLanguageOptions gt Regional Options tab   I have tested with navigator browserLanguage and navigator systemLanguage but neither  returns the value for the first setting Tools gt InternetOptions gt General gt Languages   I found a link which discusses this in detail  but the question remains unanswered

User · Answer

x000D   x000D  let lang   window navigator languages   window navigator languages 0    null  x000D      lang   lang    window navigator language    window navigator browserLanguage    window navigator userLanguage  x000D   x000D  let shortLang   lang  x000D  if  shortLang indexOf  -       -1  x000D      shortLang   shortLang split  -   0   x000D   x000D  if  shortLang indexOf          -1  x000D      shortLang   shortLang split      0   x000D   x000D  console log lang  shortLang   x000D   x000D   x000D    I only needed the primary component for my needs  but you can easily just use the full string  Works with latest Chrome  Firefox  Safari and IE10

User · Answer

Based on the answer here Accessing the web page  39 s HTTP Headers in JavaScript I built the following script to get the browser language   var req   new XMLHttpRequest    req open  GET   document location  false   req send null   var headers   req getAllResponseHeaders   toLowerCase    var contentLanguage   headers match    content-language        gm    if contentLanguage 0         return contentLanguage 0  split      1  trim   toUpperCase

User · Answer

I came across this piece of code to detect browser s language in Angular Translate module  which you can find the source here  I slightly modified the code by replacing angular isArray with Array isArray to make it independent of Angular library   x000D   x000D  var getFirstBrowserLanguage   function      x000D      var nav   window navigator  x000D      browserLanguagePropertyKeys     language    browserLanguage    systemLanguage    userLanguage    x000D      i  x000D      language  x000D   x000D         support for HTML 5 1  navigator languages  x000D      if  Array isArray nav languages     x000D        for  i   0  i  lt  nav languages length  i      x000D          language   nav languages i   x000D          if  language  amp  amp  language length    x000D            return language  x000D            x000D          x000D        x000D   x000D         support for other well known properties in browsers x000D      for  i   0  i  lt  browserLanguagePropertyKeys length  i      x000D        language   nav browserLanguagePropertyKeys i    x000D        if  language  amp  amp  language length    x000D          return language  x000D          x000D        x000D   x000D      return null  x000D       x000D   x000D  console log getFirstBrowserLanguage     x000D   x000D   x000D

User · Answer

DanSingerman has a very good solution for this question   The only reliable source for the language is in the HTTP-request header  So you need a server-side script to reply the request-header or at least the Accept-Language field back to you   Here is a very simple Node js server which should be compatible with DanSingermans jQuery plugin   var http   require  http    http createServer function  req  res      res writeHead 200    Content-Type    text plain       res end JSON stringify req headers       listen 80  0 0 0 0

User · Answer

I have a hack that I think uses very little code and is quite reliable   Put your site s files in a subdirectory  SSL into your server and create symlinks to that subdirectory where your files are stored that indicate your languages   Something like this   ln -s  var www yourhtml  var www en ln -s  var www yourhtml  var www sp ln -s  var www yourhtml  var www it   Use your web server to read HTTP ACCEPT LANGUAGE and redirect to these  different subdirectories  according to the language value it provides   Now you can use Javascript s window location href to get your url and use it in conditionals to reliably identify the preferred language   url string   window location href  if  url string    http   yoursite com it index html         document getElementById  page-wrapper   className    italian

User · Answer

Update of year 2014   Now there is a way to get Accept-Languages in Firefox and Chrome using navigator languages   works in Chrome    32 and Firefox    32   Also  navigator language in Firefox these years reflects most preferred language of content  not language of UI  But since this notion is yet to be supported by other browsers  it is not very useful   So  to get most preferred content language when possible  and use UI language as fallback   navigator languages       navigator languages 0         navigator language    navigator userLanguage

User · Answer

If you have control of a backend and are using django  a 4 line implementation of Dan s idea is   def get browser lang request   if request META has key  HTTP ACCEPT LANGUAGE        return JsonResponse   response   request META  HTTP ACCEPT LANGUAGE     else      return JsonResponse   response   settings DEFAULT LANG     then in urls py   url r  browserlang     views get browser lang  name  get browser lang      and on the front end     get lg  SERVER      browserlang    function data       var lang code   data response split      0  split      0  split  -   0          you have to set DEFAULT LANG in settings py of course

User · Answer

Javascript way   var language   window navigator userLanguage    window navigator language   returns value like  en-us    If you are using jQuery i18n plugin  you can use   jQuery i18n browserLang     returns value like   en-US

User · Answer

navigator userLanguage for IE  window navigator language for firefox opera safari

User · Answer

There is no decent way to get that setting  at least not something browser independent   But the server has that info  because it is part of the HTTP request header  the Accept-Language field  see http   www w3 org Protocols rfc2616 rfc2616-sec14 html sec14 4   So the only reliable way is to get an answer back from the server  You will need something that runs on the server  like  asp   jsp   php  CGI  and that  thing  can return that info  Good examples here  http   www developershome com wap detection detection asp page readHeader

User · Answer

i had a diffrent approach  this might help someone in the future   the customer wanted a page where you can swap languages  i needed to format numbers by that setting  not the browser setting   not by any predefined setting   so i set an initial setting depending on the config settings  i18n    clang    this- gt Session- gt read  Config language    echo   lt script type  text javascript  gt var clang     clang  lt  script gt      later in the script i used a function to determine what numberformating i need  function getLangsettings      if typeof clang      undefined   clang   navigator language      console log clang     switch clang       case  de       case  de-de           return  precision   2  thousand        decimal            case  en       case  en-gb       default          return  precision   2  thousand        decimal                so i used the set language of the page and as a fallback i used the browser settings   which should be helpfull for testing purposes aswell   depending on your customers you might not need that settings

User · Answer

Dan Singerman s answer has an issue that the header fetched has to be used right away  due to the asynchronous nature of jQuery s ajax   However  with his google app server  I wrote the following  such that the header is set as part of the initial set up and can be used at later time    lt html gt   lt head gt   lt script gt       var bLocale  raw      can be used at any other place      function processHeaders headers           bLocale headers  Accept-Language            comma bLocale indexOf               if comma gt 0  bLocale bLocale substring 0  comma           lt  script gt    lt script src  jquery-1 11 0 js  gt  lt  script gt    lt script type  application javascript  src  http   ajaxhttpheaders appspot com callback processHeaders  gt  lt  script gt    lt  head gt   lt body gt    lt h1 id  bLocale  gt Should be the browser locale here lt  h1 gt    lt  body gt    lt script gt           bLocale   text bLocale     lt  script gt   lt  html gt

User · Answer

I had the same problem  and I wrote the following front-end only library that wraps up the code for multiple browsers  It s not much code  but nice to not have to copy and paste the same code across multiple websites   Get it  acceptedlanguages js  Use it    lt script src  acceptedlanguages js  gt  lt  script gt   lt script type  text javascript  gt    console log  Accepted Languages       acceptedlanguages accepted    lt  script gt    It always returns an array  ordered by users preference  In Safari  amp  IE the array is always single length  In FF and Chrome it may be more than one language

User · Answer

var language   window navigator userLanguage    window navigator language  alert language     works IE SAFARI CHROME FF   window navigator userLanguage is IE only and it s the language set in Windows Control Panel - Regional Options and NOT browser language  but you could suppose that a user using a machine with Window Regional settings set to France is probably a French user   navigator language is FireFox and all other browser   Some language code   it    italy   en-US    english US  etc     As pointed out by rcoup and The WebMacheter in comments below  this workaround won t let you discriminate among English dialects when users are viewing website in browsers other than IE   window navigator language  Chrome FF Safari  returns always browser language and not browser s preferred language  but   it s pretty common for English speakers  gb  au  nz  etc  to have an en-us version of Firefox Chrome Safari   Hence window navigator language will still return en-US even if the user preferred language is en-GB

User · Answer

If you only need to support certain modern browsers then you can now use   navigator languages   which returns an array of the user s language preferences in the order specified by the user   As of now  Sep 2014  this works on  Chrome  v37    Firefox  v32  and  Opera  v24   But not on  IE  v11

User · Answer

I ve been using Hamid s answer for a while  but it in cases where the languages array is like   en    en-GB    en-US    fr-FR    fr    en-ZA   it will return  en   when  en-GB  would be a better match   My update  below  will return the first long format code e g   en-GB   otherwise it will return the first short code e g   en   otherwise it will return null    x000D   x000D  function getFirstBrowserLanguage     x000D          var nav   window navigator  x000D              browserLanguagePropertyKeys     language    browserLanguage    systemLanguage    userLanguage    x000D              i  x000D              language  x000D              len  x000D              shortLanguage   null  x000D   x000D             support for HTML 5 1  navigator languages  x000D          if  Array isArray nav languages     x000D              for  i   0  i  lt  nav languages length  i      x000D                  language   nav languages i   x000D                  len   language length  x000D                  if   shortLanguage  amp  amp  len    x000D                      shortLanguage   language  x000D                    x000D                  if  language  amp  amp  len gt 2    x000D                      return language  x000D                    x000D                x000D            x000D   x000D             support for other well known properties in browsers x000D          for  i   0  i  lt  browserLanguagePropertyKeys length  i      x000D              language   nav browserLanguagePropertyKeys i    x000D                skip this loop iteration if property is null undefined   IE11 fix  x000D              if  language    null    continue     x000D              len   language length  x000D              if   shortLanguage  amp  amp  len    x000D                  shortLanguage   language  x000D                x000D              if  language  amp  amp  len  gt  2    x000D                  return language  x000D                x000D            x000D   x000D          return shortLanguage  x000D        x000D   x000D  console log getFirstBrowserLanguage     x000D   x000D   x000D    Update  IE11 was erroring when some properties were undefined   Added a check to skip those properties

User · Answer

If you are developing a Chrome App   Extension use the chrome i18n API   chrome i18n getAcceptLanguages function languages      console log languages          en-AU    en    en-US

User · Answer

x000D   x000D  var language   navigator languages  amp  amp  navigator languages 0        Chrome   Firefox x000D                 navigator language         All browsers x000D                 navigator userLanguage     IE  lt   10 x000D   x000D  console log language   x000D   x000D   x000D     https   developer mozilla org en-US docs Web API NavigatorLanguage languages https   developer mozilla org en-US docs Web API NavigatorLanguage language   Try PWA Template https   github com StartPolymer progressive-web-app-template

User · Answer

I ve just come up with this  It combines newer JS destructuring syntax with a few standard operations to retrieve the language and locale  var  lang  locale                                  navigator userLanguage    navigator language           replace               -                       toLowerCase     split        Hope it helps someone

User · Answer

For what it s worth  Wikimedia s Universal Language Selector library has hooks for doing this  https   www mediawiki org wiki Extension UniversalLanguageSelector  See the function getFrequentLanguageList in resources js ext uls init js   Direct link  https   gerrit wikimedia org r gitweb p mediawiki extensions UniversalLanguageSelector git a blob f resources js ext uls init js hb HEAD  It still depends on the server  or more specifically  the MediaWiki API  The reason I m showing it is that it may provide a good example of getting all the useful information about the user s language  browser language  Accept-Language  geolocation  with getting country language info from the CLDR   and of course  user s own site preferences

User · Answer

First of all  excuse me for my English  I would like to share my code  because it works and it is different than the others given anwers   In this exemple if you speak French  France  Belgium or other french language  you are redirected on the french page  otherwise on the english page  depending on the browser configuration     x000D   x000D   lt script type  text javascript  gt  x000D            document  ready function      x000D              var userLang   navigator language    navigator userLanguage  x000D              if  userLang startsWith  fr      x000D                      window location href       fr index html   x000D                    x000D              else   x000D                      window location href       en index html   x000D                    x000D                  x000D       lt  script gt  x000D   x000D   x000D

User · Answer

I think the main problem here is that the browser settings don t actually affect the navigator language property that is obtained via javascript    What they do affect is the HTTP  Accept-Language  header  but it appears this value is not available through javascript at all   Probably why  anddoutoi states he can t find a reference for it that doesn t involve server side    I have coded a workaround  I ve knocked up a google app engine script at http   ajaxhttpheaders appspot com that will return you the HTTP request headers via JSONP    Note  this is a hack only to be used if you do not have a back end available that can do this for you  In general you should not be making calls to  third party hosted javascript files in your pages unless you have a very high level of trust in the host    I intend to leave it there in perpetuity so feel free to use it in your code   Here s some example code  in jQuery  for how you might use it    ajax        url   http   ajaxhttpheaders appspot com        dataType   jsonp        success  function headers            language   headers  Accept-Language            nowDoSomethingWithIt language               Hope someone finds this useful   Edit  I have written a small jQuery plugin on github that wraps this functionality  https   github com dansingerman jQuery-Browser-Language  Edit 2  As requested here is the code that is running on AppEngine  super trivial really    class MainPage webapp RequestHandler       def get self           headers   self request headers         callback   self request get  callback            if callback            self response headers  Content-Type      application javascript            self response out write callback                  self response out write headers            self response out write              else            self response headers  Content-Type      text plain            self response out write  I need a callback     application   webapp WSGIApplication                                              MainPage                                         debug False   def main        run wsgi app application   if   name         main         main     Edit3  Have open sourced the app engine code here  https   github com dansingerman app-engine-headers

User · Answer

If you don t want to rely on an external server and you have one of your own you can use a simple PHP script to achieve the same behavior as  DanSingerman answer   languageDetector php    lt  php  lang   substr   SERVER  HTTP ACCEPT LANGUAGE    0  2   echo json encode  lang     gt    And just change this lines from the jQuery script   url   languageDetector php   dataType   json   success  function language        nowDoSomethingWithIt language

User · Answer

For who are looking for Java Server solution  Here is RestEasy   GET  Path   preference-language    Consumes   application json    application xml     Produces   application json    application xml    public Response getUserLanguagePreference  Context HttpHeaders headers        return Response status 200               entity headers getAcceptableLanguages   get 0                build

User · Answer

I can t find a single reference that state that it s possible without involving the serverside   MSDN on    navigator browserLanguage navigator systemLanguage navigator userLanguage   From browserLanguage      In Microsoft Internet Explorer 4 0 and   earlier  the browserLanguage property   reflects the language of the installed   browser s user interface  For example    if you install a Japanese version of   Windows Internet Explorer on an   English operating system    browserLanguage would be ja       In Internet Explorer 5 and later    however  the browserLanguage property   reflects the language of the operating   system regardless of the installed   language version of Internet Explorer    However  if Microsoft Windows 2000   MultiLanguage version is installed    the browserLanguage property indicates   the language set in the operating   system s current menus and dialogs  as   found in the Regional Options of the   Control Panel  For example  if you   install a Japanese version of Internet   Explorer 5 on an English  United   Kingdom  operating system    browserLanguage would be en-gb  If you   install Windows 2000 MultiLanguage   version and set the language of the   menus and dialogs to French    browserLanguage would be fr  even   though you have a Japanese version of   Internet Explorer            Note  This property does not indicate     the language or languages set by the     user in Language Preferences  located     in the Internet Options dialog box       Furthermore  it looks like browserLanguage is deprecated cause IE8 doesn t list it

User · Answer

If you are using ASP  NET MVC and you want to get the Accepted-Languages header from JavaScript then here is a workaround example that does not involve any asynchronous requests   In your  cshtml file  store the header securely in a div s data- attribute    lt div data-languages   Json Encode HttpContext Current Request UserLanguages   gt  lt  div gt    Then your JavaScript code can access the info  e g  using JQuery    lt script type  text javascript  gt      data-languages    each function          var languages     this  data  languages        for  var i   0  i  lt  languages length  i              var regex     -             console log languages i  split regex  0               lt  script gt    Of course you can use a similar approach with other server technologies as others have mentioned

[javascript] JavaScript for detecting browser language preference

Examples related to javascript

Examples related to localization

Examples related to internationalization