Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

With JavaScript how can I find the name of the web browser, with version?

HTML Javascript Programming Scripts

To find the name of the web browser with version in JavaScript, you can use the navigator object which provides information about the user's browser and system.

Basic Browser Detection

The traditional approach uses navigator.userAgent to detect browser types:

<html>
<head>
    <title>Browser Detection Example</title>
</head>
<body>
    <script>
        var userAgent = navigator.userAgent;
        var opera = (userAgent.indexOf('Opera') != -1);
        var ie = (userAgent.indexOf('MSIE') != -1 || userAgent.indexOf('Trident') != -1);
        var chrome = (userAgent.indexOf('Chrome') != -1);
        var firefox = (userAgent.indexOf('Firefox') != -1);
        var safari = (userAgent.indexOf('Safari') != -1 && userAgent.indexOf('Chrome') == -1);
        var version = navigator.appVersion;

        if (chrome) {
            document.write("Chrome browser");
        } else if (firefox) {
            document.write("Firefox browser");
        } else if (safari) {
            document.write("Safari browser");
        } else if (opera) {
            document.write("Opera browser");
        } else if (ie) {
            document.write("Internet Explorer browser");
        } else {
            document.write("Unknown browser");
        }
        
        document.write("<br>Browser version info: " + version);
    </script>
</body>
</html>

Modern Approach with Detailed Detection

A more comprehensive function to detect browser name and version:

<html>
<head>
    <title>Advanced Browser Detection</title>
</head>
<body>
    <script>
        function getBrowserInfo() {
            var userAgent = navigator.userAgent;
            var browserName = "Unknown";
            var browserVersion = "Unknown";
            
            // Chrome
            if (userAgent.indexOf("Chrome") > -1) {
                browserName = "Chrome";
                browserVersion = userAgent.match(/Chrome\/([0-9.]+)/)[1];
            }
            // Firefox
            else if (userAgent.indexOf("Firefox") > -1) {
                browserName = "Firefox";
                browserVersion = userAgent.match(/Firefox\/([0-9.]+)/)[1];
            }
            // Safari
            else if (userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1) {
                browserName = "Safari";
                browserVersion = userAgent.match(/Version\/([0-9.]+)/)[1];
            }
            // Opera
            else if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
                browserName = "Opera";
                if (userAgent.indexOf("OPR") > -1) {
                    browserVersion = userAgent.match(/OPR\/([0-9.]+)/)[1];
                } else {
                    browserVersion = userAgent.match(/Opera\/([0-9.]+)/)[1];
                }
            }
            // Internet Explorer
            else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident") > -1) {
                browserName = "Internet Explorer";
                if (userAgent.indexOf("MSIE") > -1) {
                    browserVersion = userAgent.match(/MSIE ([0-9.]+)/)[1];
                } else {
                    browserVersion = userAgent.match(/rv:([0-9.]+)/)[1];
                }
            }
            
            return {
                name: browserName,
                version: browserVersion
            };
        }
        
        var browserInfo = getBrowserInfo();
        document.write("<h3>Browser Information:</h3>");
        document.write("<p>Browser: " + browserInfo.name + "</p>");
        document.write("<p>Version: " + browserInfo.version + "</p>");
        document.write("<p>Full User Agent: " + navigator.userAgent + "</p>");
    </script>
</body>
</html>

Key Points

  • navigator.userAgent contains the browser identification string
  • Different browsers have unique identifiers in their user agent strings
  • Version numbers can be extracted using regular expressions
  • Modern browsers may have multiple identifiers, so check order matters
  • User agent strings can be modified by users or extensions

Comparison of Detection Methods

Method Accuracy Version Detection Reliability
Basic userAgent check Medium Basic Can be spoofed
Regex pattern matching High Detailed More reliable
Feature detection Very High No Most reliable

Conclusion

Browser detection using navigator.userAgent provides a way to identify browser names and versions. However, for production applications, feature detection is often preferred over browser detection for better compatibility and reliability.

Updated on: 2026-03-15T23:18:59+05:30

385 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements