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 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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Detect Chrome
    let chromeAgent = userAgentString.indexOf("Chrome") > -1;

    chevron_right

    
    

  • 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Detect Internet Explorer
    let IExplorerAgent = userAgentString.indexOf("MSIE") > -1 || 
                         userAgentString.indexOf("rv:") > -1;

    chevron_right

    
    

  • 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Detect Firefox
    let firefoxAgent = userAgentString.indexOf("Firefox") > -1;

    chevron_right

    
    

  • 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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Detect Safari
    let safariAgent = userAgentString.indexOf("Safari") > -1;
      
    // Discard Safari since it also matches Chrome
    if ((chromeAgent) && (safariAgent)) safariAgent = false;

    chevron_right

    
    

  • 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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Detect Opera
    let operaAgent = userAgentString.indexOf("OP") > -1;
      
    // Discard Chrome since it also matches Opera        
    if ((chromeAgent) && (operaAgent)) chromeAgent = false;

    chevron_right

    
    

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Output on the Chrome browser:
    chrome-output
  • Output on the Firefox browser:
    firefox-output
  • Output on the Opera browser:
    opera-output


My Personal Notes arrow_drop_up

Maybe this silence is dangerous

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.