How to detect the browser language preference using JavaScript ? Last Updated : 23 May, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Detecting the language preferences of users can be very important for Websites or Web Apps to increase user interaction. In JavaScript, this task can be easily done by using the Languages property available for the navigator interface. The navigator.language and the navigator.languages property together can be used to get the browser language preference or the most preferred language by the user. Syntax:navigator.languages ANDnavigator.languageReturn Values: The navigator.languages property will return an array that stores the preferred languages in which the language most preferred by the user will be the first element.The navigator.language property will return the first element of the array which is returned by the navigator.languages property i.e. the most preferred user language.NOTE: Language property is a read-only property, thus it is only possible for us to get the value, we cannot make changes to the user's preferred language. Example 1: The below code will show how you can use the navigator.languages property to get the all preferred languages in the browser. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Get browser language preference </title> </head> <body> <div style="text-align: center;"> <h2 style="color: green;"> GeeksforGeeks </h2> <h3> Click the below button to get the language preference. </h3> <button id="myBtn"> Get Preferred language </button> <p id="result"></p> </div> <script> const myBtn = document. getElementById('myBtn') function getLanguages() { const langs = navigator.languages; const result = document. getElementById('result'); result.innerHTML += `The Preferred languages are: <b>${langs}</b>`; } myBtn.addEventListener('click', getLanguages); </script> </body> </html> Output: Example 2: The below example will explain how you can use both language properties together to get the most preferred language by the user. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: sans-serif; } </style> </head> <body> <h3>Click the below button to get the most preferred language.</h3> <button id="myBtn">Get most Preferred language</button> <p id="result"></p> <script> const myBtn = document.getElementById("myBtn"); function getPreferredLanguage() { const langs = navigator.languages; const lang = navigator.language; const result = document.getElementById("result"); result.innerHTML += `The Preferred languages are: <b>${lang}</b>`; } myBtn.addEventListener("click", getPreferredLanguage); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Detect Keypress using JavaScript ? _Krish Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to Detect Browser Language in PHP? We can detect requesting browser's language using PHP's super global variable $_SERVER. It is a superglobal variable that holds information about headers, paths, and script locations. It is basically an associative array in PHP which has keys like SERVER_NAME, SERVER_ADDR, REQUEST_METHOD, etc. We ca 1 min read How to switch the language of the page using JavaScript ? Switching the language of a webpage using JavaScript involves dynamically changing the text content based on the user's language selection. This can be done by loading language-specific text from a predefined dataset, translating page elements, or reloading content from a localized source using Java 3 min read How to Detect Operating System on the Client Machine using JavaScript? To detect the operating system on the client machine, one can simply use navigator.appVersion property. The Navigator appVersion property is a read-only property and it returns a string that represents the version information of the browser. Syntax:navigator.appVersionExample 1: This example uses th 2 min read How to detect browser autofill using JavaScript? We will learn how to detect browser autofill using javascript. Here we are going to use 3 programming languages HTML, CSS, Jquery to solve this problem in the best and well-defined way. In all web browser autofill is the feature that automatically fills the form fields such as email, address, passwo 4 min read How to Detect Keypress using JavaScript ? In this article, keyboard detection is performed using HTML and CSS. HTML stands for "Hypertext Markup Language". HTML language helps the developer to create and design web page elements like links, sections, paragraphs, headings, and blockquotes for web applications. CSS stands for "Cascading Style 2 min read How to detect the user browser ( Safari, Chrome, IE, Firefox and Opera ) using JavaScript ? The browser on which the current page is opening can be checked using JavaScript. The userAgent property of the navigator object is used to return the user-agent header string sent by the browser. This user-agent string contains information about the browser by including certain keywords that may be 4 min read Like