How to Detect Browser in JavaScript

Often you may need to customize your website or web application depending on the browser used by your visitor. You can do this kind of personalization using JavaScript. For example, depending on the client browser you may want to display different message or content. In this article, we will learn how to detect browser in JavaScript. Once you are able to find out the client web browser, you can customize your web page as per your requirement.

How to Detect Browser in JavaScript

There are a couple of ways to find out client browser – using userAgent.match and userAgent.indexOf. navigator.userAgent contains information about web browser of client, as a string. Depending on the type of web browser, this string’s value will be different. For example, if the client browser is Chrome then it navigator.userAgent may contain chrome/chromium/crios substring.

1. Using userAgent.match

In this approach, we call match() JS function to determine client browser.

var userAgent = navigator.userAgent;
if(userAgent.match(/chrome|chromium|crios/i)){
             browserName = "chrome";
   }

In the above code, we first store the userAgent value in a string. Then we call match() function on it to determine if it contains any of the values commonly assigned to userAgent, in case the browser is Chrome.

You can wrap the above if condition within a function as shown. We have used separate if conditions below to check for different types of browsers.

<script>

function BrowserDetect(){
                 
         var userAgent = navigator.userAgent;
         var browserName;
         
         if(userAgent.match(/chrome|chromium|crios/i)){
             browserName = "chrome";
           }else if(userAgent.match(/firefox|fxios/i)){
             browserName = "firefox";
           }  else if(userAgent.match(/safari/i)){
             browserName = "safari";
           }else if(userAgent.match(/opr\//i)){
             browserName = "opera";
           } else if(userAgent.match(/edg/i)){
             browserName = "edge";
           }else{
             browserName="No browser detection";
           }
         
          alert('Your browser is '+ browserName);      
  }

</script>

You can call this function on page load to display the browser name of your client.

2. Using userAgent.indexOf

In this approach, we use indexOf function to determine the type of web browser. We check the presence of certain substrings in userAgent string, to find out the web browser. If the desired string is not present, indexOf() function will return -1.

var browserName = (function (agent) {        switch (true) {
            case agent.indexOf("edge") > -1: return "MS Edge";
            case agent.indexOf("edg/") > -1: return "Edge ( chromium based)";
            case agent.indexOf("opr") > -1 && !!window.opr: return "Opera";
            case agent.indexOf("chrome") > -1 && !!window.chrome: return "Chrome";
            case agent.indexOf("trident") > -1: return "MS IE";
            case agent.indexOf("firefox") > -1: return "Mozilla Firefox";
            case agent.indexOf("safari") > -1: return "Safari";
            default: return "other";
        }
    })(window.navigator.userAgent.toLowerCase());

Of course, you can also use if else statements to do the above checks.

In this article, we have learnt how to detect web browser in JavaScript. It is useful in customization of your web pages, according to the browser used. Basically, it is about checking for browser name in userAgent string.

How to Detect Browser in JavaScript