If you need to get the browser name and version number in JavaScript, this short tutorial is right for you. I got this script from somewhere I don’t remember anymore and this piece of code is really helpful to me.

As we all knew, some browsers doesn’t fully support JavaScript methods that we need in our application. To target or run codes in specific browsers, we need to get each browser type, name, and version number so we can run the proper code for each browser.

And that’s where this code comes in. You can use this in conditional statement and execute the right code for the right browser.

This code is dependent with modernizr so make sure to enqueue modernizr library right before using this script.

The Code Snippet

var getBrowser = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "Other";
        this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
    },
    searchString: function (data) {
        for (var i = 0; i < data.length; i++) {
            var dataString = data[i].string;
            this.versionSearchString = data[i].subString;

            if (dataString.indexOf(data[i].subString) !== -1) {
                return data[i].identity;
            }
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index === -1) {
            return;
        }

        var rv = dataString.indexOf("rv:");
        if (this.versionSearchString === "Trident" && rv !== -1) {
            return parseFloat(dataString.substring(rv + 3));
        } else {
            return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
        }
    },

    dataBrowser: [
        {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
        {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
        {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
        {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
        {string: navigator.userAgent, subString: "Safari", identity: "Safari"},
        {string: navigator.userAgent, subString: "Opera", identity: "Opera"}
    ]

};
getBrowser.init();

Usage Example

To execute code for Internet Explorer only
if(getBrowser.browser === 'Explorer'){
//code to execute for Internet Explorer
}
To execute code for Internet Explorer 8 and below
if(getBrowser.browser === 'Explorer' && getBrowser.version < 9){
//code to execute for Internet Explorer less than 9 versions
}
To execute code Except Internet Explorer
if(getBrowser.browser !== 'Explorer'){
//code to execute
}
To execute code for chrome only
if(getBrowser.browser === 'Chrome'){
//code to execute for Chrome
}

Full Code Example

<script type="text/javascript" src="/js/modernizr.min.js">
<script>
var getBrowser = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "Other";
        this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
    },
    searchString: function (data) {
        for (var i = 0; i < data.length; i++) {
            var dataString = data[i].string;
            this.versionSearchString = data[i].subString;

            if (dataString.indexOf(data[i].subString) !== -1) {
                return data[i].identity;
            }
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index === -1) {
            return;
        }

        var rv = dataString.indexOf("rv:");
        if (this.versionSearchString === "Trident" && rv !== -1) {
            return parseFloat(dataString.substring(rv + 3));
        } else {
            return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
        }
    },

    dataBrowser: [
        {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
        {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
        {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
        {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
        {string: navigator.userAgent, subString: "Safari", identity: "Safari"},
        {string: navigator.userAgent, subString: "Opera", identity: "Opera"}
    ]

};
getBrowser.init();

if(getBrowser.browser === 'Explorer' && getBrowser.version < 9){
alert('I am an old browser!');
}
</script>