Browser detection in JavaScript? [duplicate]

Question

This question already has an answer here:

• How can you detect the version of a browser? 23 answers

How do I determine the exact browser and version using JavaScript?

Answer 1

This little library may help you. But be aware that browser detection is not always the solution.

Answer 2

Instead of hardcoding web browsers, you can scan the user agent to find the browser name:

navigator.userAgent.split(')').reverse()[0].match(/(?!Gecko|Version|[A-Za-z]+?Web[Kk]it)[A-Z][a-z]+/g)[0]

I've tested this on Safari, Chrome, and Firefox. Let me know if you found this doesn't work on a browser.

• Safari: "Safari"
• Chrome: "Chrome"
• Firefox: "Firefox"

You can even modify this to get the browser version if you want. Do note there are better ways to get the browser version

navigator.userAgent.split(')').reverse()[0].match(/(?!Gecko|Version|[A-Za-z]+?Web[Kk]it)[A-Z][a-z]+\/[\d.]+/g)[0].split('/')

Sample output:

Firefox/39.0    

Answer 3

Since Internet Explorer 11 (IE11+) came out and is not using the tag name of MSIE anymore I came up with a variance of an older detection function:

navigator.sayswho= (function(){
    var N= navigator.appName, ua= navigator.userAgent, tem;

    // if IE11+
    if (new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})").exec(ua) !== null) {
        var M= ["Internet Explorer"];
        if(M && (tem= ua.match(/rv:([0-9]{1,}[\.0-9]{0,})/))!= null) M[2]= tem[1];
        M= M? [M[0], M[2]]: [N, navigator.appVersion,'-?'];
        return M;
    }

    var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
    if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
    M= M? [M[1], M[2]]: [N, navigator.appVersion,'-?'];
    return M;
})();

Answer 4

Some times we need simple method to check if the browser is IE or not. This is how it could be:

 var isMSIE = (/trident/i).test(navigator.userAgent);

 if(isMSIE)
 {
  /* do something for ie */
 }
 else
 {
  /* do something else */
 }

or simplified siva's method:

 if(!!navigator.systemLanguage)
 {
  /* do something for ie */
 }
 else
 {
  /* do something else */
 }

MSIE v.11 check:

if( (/trident/i).test(navigator.userAgent) && (/rv:/i).test(navigator.userAgent) )
{
  /* do something for ie 11 */
}

other IE browsers contain MSIE string in their userAgent property and could be catched by it.

Answer 5

Below code snippet will show how how you can show UI elemnts depends on IE version and browser

$(document).ready(function () {

var msiVersion = GetMSIieversion();
if ((msiVersion <= 8) && (msiVersion != false)) {

    //Show UI elements specific to IE version 8 or low

    } else {
    //Show UI elements specific to IE version greater than 8 and for other browser other than IE,,ie..Chrome,Mozila..etc
    }
}
);

Below code will give how we can get IE version

function GetMSIieversion() {

var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
if (msie > 0) {
    // IE 10 or older => return version number
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
}

var trident = ua.indexOf('Trident/');
if (trident > 0) {
    // IE 11 => return version number
    var rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
}

var edge = ua.indexOf('Edge/');
if (edge > 0) {
    // Edge (IE 12+) => return version number
    return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
}

// other browser like Chrome,Mozila..etc
return false;

}

Answer 6

I make this small function, hope it helps. Here you can find the latest version browserDetection

function detectBrowser(userAgent){
  var chrome  = /.*(Chrome\/).*(Safari\/).*/g;
  var firefox = /.*(Firefox\/).*/g;
  var safari  = /.*(Version\/).*(Safari\/).*/g;
  var opera   = /.*(Chrome\/).*(Safari\/).*(OPR\/).*/g

  if(opera.exec(userAgent))
    return "Opera"
  if(chrome.exec(userAgent))
    return "Chrome"
  if(safari.exec(userAgent))
    return "Safari"
  if(firefox.exec(userAgent))
    return "Firefox"
}