How to detect the user browser ( Safari, Chrome, IE, Firefox and Opera ) using JavaScript ?

29 Jun, 2022
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 tested for their presence.
The presence of a specific user-string can be detected using the indexOf() method. The indexOf() method is used to return the first occurrence of the specified string value in a string. If the value does not come up in the string, “-1” is returned.
The user-agent string of the browser is accessed using the navigator.userAgent property and then stored in a variable. The presence of the strings of a browser in this user-agent string is detected one by one.
Detecting the Chrome browser: The user-agent of the Chrome browser is “Chrome”. This value is passed to indexOf() method to detect this value in the user-agent string.As the indexOf() method would return a value that is greater than “-1” to denote a successful search, the “greater-than” operator is used to return a boolean value on whether the search was successful or not. This is done for all the following tests.// Detect Chromelet chromeAgent = userAgentString.indexOf("Chrome") > -1;
As the indexOf() method would return a value that is greater than “-1” to denote a successful search, the “greater-than” operator is used to return a boolean value on whether the search was successful or not. This is done for all the following tests.
// Detect Chromelet chromeAgent = userAgentString.indexOf("Chrome") > -1;
Detecting the Internet Explorer browser: The user-agent of the Internet Explorer browser is “MSIE” or “rv:”. Both these values are passed to the indexOf() method to detect this value in the user-agent string and the result of both them are used with the OR operator.// Detect Internet Explorerlet IExplorerAgent = userAgentString.indexOf("MSIE") > -1 ||                      userAgentString.indexOf("rv:") > -1;
// Detect Internet Explorerlet IExplorerAgent = userAgentString.indexOf("MSIE") > -1 ||                      userAgentString.indexOf("rv:") > -1;
Detecting the Firefox browser: The user-agent of the Firefox browser is “Firefox”. This value is passed to indexOf() method to detect this value in the user-agent string.// Detect Firefoxlet firefoxAgent = userAgentString.indexOf("Firefox") > -1;
// Detect Firefoxlet firefoxAgent = userAgentString.indexOf("Firefox") > -1;
Detecting the Safari browser: The user-agent of the Safari browser is “Safari”. This value is passed to indexOf() method to detect this value in the user-agent string.One additional check is required in the case of the Safari browser as the user-agent of the Chrome browser also includes the Safari browser’s user-agent. If both the user-agents of Chrome and Safari are in the user-agent, it means that the browser is Chrome, and hence the Safari browser value is discarded.// Detect Safarilet safariAgent = userAgentString.indexOf("Safari") > -1;  // Discard Safari since it also matches Chromeif ((chromeAgent) && (safariAgent)) safariAgent = false;
One additional check is required in the case of the Safari browser as the user-agent of the Chrome browser also includes the Safari browser’s user-agent. If both the user-agents of Chrome and Safari are in the user-agent, it means that the browser is Chrome, and hence the Safari browser value is discarded.
// Detect Safarilet safariAgent = userAgentString.indexOf("Safari") > -1;  // Discard Safari since it also matches Chromeif ((chromeAgent) && (safariAgent)) safariAgent = false;
Detecting the Opera browser: The user-agent of the Opera browser is “OP”. This value is passed to indexOf() method to detect this value in the user-agent string.One additional check is also required in the case of this browser as the user-agent of the Opera browser also includes the Chrome browser’s user-agent. If both the user-agents of Chrome and Opera are in the user-agent, it means that the browser is Opera, and hence the Chrome browser value is discarded.// Detect Operalet operaAgent = userAgentString.indexOf("OP") > -1;  // Discard Chrome since it also matches Opera        if ((chromeAgent) && (operaAgent)) chromeAgent = false;
One additional check is also required in the case of this browser as the user-agent of the Opera browser also includes the Chrome browser’s user-agent. If both the user-agents of Chrome and Opera are in the user-agent, it means that the browser is Opera, and hence the Chrome browser value is discarded.
// Detect Operalet operaAgent = userAgentString.indexOf("OP") > -1;  // Discard Chrome since it also matches Opera        if ((chromeAgent) && (operaAgent)) chromeAgent = false;
Example:
<!DOCTYPE html><html>      <head>    <title>        How to detect Safari, Chrome, IE, Firefox        and Opera browser using JavaScript?    </title></head>  <body>    <h1 style="color: green">GeeksforGeeks</h1>          <b>        How to detect Safari, Chrome, IE, Firefox        and Opera browser using JavaScript?    </b>          <p>        Click on the button to detect        the current browser    </p>          <p>        Is Safari?         <span class="output-safari"></span>    </p>          <p>        Is Chrome?         <span class="output-chrome"></span>    </p>          <p>        Is Internet Explorer?         <span class="output-ie"></span>    </p>          <p>        Is Firefox?         <span class="output-firefox"></span>    </p>          <p>        Is Opera browser?         <span class="output-opera"></span>    </p>          <button onclick="checkBrowser()">        Detect browser    </button>          <script>        function checkBrowser() {                      // Get the user-agent string            let userAgentString =                 navigator.userAgent;                      // Detect Chrome            let chromeAgent =                 userAgentString.indexOf("Chrome") > -1;                      // Detect Internet Explorer            let IExplorerAgent =                 userAgentString.indexOf("MSIE") > -1 ||                 userAgentString.indexOf("rv:") > -1;                      // Detect Firefox            let firefoxAgent =                 userAgentString.indexOf("Firefox") > -1;                      // Detect Safari            let safariAgent =                 userAgentString.indexOf("Safari") > -1;                              // Discard Safari since it also matches Chrome            if ((chromeAgent) && (safariAgent))                 safariAgent = false;                      // Detect Opera            let operaAgent =                 userAgentString.indexOf("OP") > -1;                              // Discard Chrome since it also matches Opera                 if ((chromeAgent) && (operaAgent))                 chromeAgent = false;                      document.querySelector(".output-safari").textContent                        = safariAgent;            document.querySelector(".output-chrome").textContent                        = chromeAgent;            document.querySelector(".output-ie").textContent                        = IExplorerAgent;            document.querySelector(".output-opera").textContent                        = operaAgent;            document.querySelector(".output-firefox").textContent                        = firefoxAgent;        }    </script></body>  </html>
Output:
Output on the Chrome browser:
Output on the Firefox browser:
Output on the Opera browser:
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.