How To Use JavaScript To Get Web Browser Name And Version

Leave a Comment / JavaScript Tutorial

When you develop a javascript program, you always need to get the client user’s web browser information such as name and version, .etc. This article will tell you how to get the web-browser data using javascript with examples.

1. How To Use JavaScript To Get Web Browser Name & Version Example.

  1. You can use the JavaScript navigator object’s userAgent attribute to get the client user web browser information in a string. 
    var userAgent = navigator.userAgent;
  2. For the different web browsers, the above userAgent string value is also different as below.
  3. Chrome on Windows: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36.
  4. Chrome on macOS: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.83 Safari/537.36.
  5. Chrome on iOS: Mozilla/5.0 (iPhone; CPU iPhone OS 15_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/101.0.4951.58 Mobile/15E148 Safari/604.1.
  6. Firefox on Windows: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0.
  7. Firefox on macOS: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:98.0) Gecko/20100101 Firefox/98.0.
  8. Firefox on iOS: Mozilla/5.0 (iPhone; CPU iPhone OS 15_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/100.1 Mobile/15E148 Safari/605.1.15.
  9. Safari on macOS: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.2 Safari/605.1.15.
  10. Safari on iOS: Mozilla/5.0 (iPhone; CPU iPhone OS 15_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Mobile/15E148 Safari/604.1.
  11. Microsoft Edge on Windows: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36 Edg/101.0.1210.39.
  12. Microsoft Edge on macOS: Browser user agent info: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36 Edg/101.0.1210.47.
  13. Microsoft Edge on iOS: Mozilla/5.0 (iPhone; CPU iPhone OS 15_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) EdgiOS/101.0.1210.47 Version/15.0 Mobile/15E148 Safari/604.1.
  14. Opera on Windows: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36 OPR/86.0.4363.59.
  15. Opera on macOS: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36 OPR/87.0.4390.25.
  16. Opera on iOS: Mozilla/5.0 (iPhone; CPU iPhone OS 15_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 OPT/3.2.9.
  17. Then we can parse out the web browser name, version, and running OS from the above user agent string.
  18. The below picture is this example web page, it shows the google chrome web browser’s user agent, name, version, and running OS when you browse this page in your web browser.
    get-google-chrome-web-browser-user-agent-data-in-javascript
  19. The example source file is how-to-use-javascript-to-get-web-browser-name-and-version.html, and below is the Html file source code. 
    <!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>How To Use Javascript To Get Web Browser Name And Version Example</title>
<script>

function getBrowserInfo(){

    var userAgent = navigator.userAgent;

    var browserInfoArr = parseBrowserInfo(userAgent);

    var browserUserAgentDiv = document.getElementById('browserUserAgent');

    var browserNameDiv = document.getElementById('browserName');

    var browserVersionDiv = document.getElementById('browserVersion');

    var browserRunningDeviceDiv = document.getElementById('browserRunningDevice');

    browserUserAgentDiv.innerHTML = 'Browser user agent: ' + userAgent;

    browserNameDiv.innerHTML = 'Browser name: ' + browserInfoArr[0];

    browserVersionDiv.innerHTML = 'Browser version: ' + browserInfoArr[1];

    browserRunningDeviceDiv.innerHTML = 'Browser running device OS: ' + browserInfoArr[2]; 

}

function parseBrowserInfo(browserUserAgentString){

    // The returned array contains 3 elements, browser name, version, running device.
    var ret = new Array();

    if(browserUserAgentString != null){

        browserUserAgentString = browserUserAgentString.trim()

        var lowerStr = browserUserAgentString.toLowerCase();

        if(lowerStr != ''){

            var startIdx = browserUserAgentString.indexOf("(");
            var endIdx = browserUserAgentString.indexOf(")", startIdx + 1);

            var name = '';

            var version = '';

            var deviceOS = browserUserAgentString.substring(startIdx+1, endIdx);

            // web browser on mobile device.
            if(lowerStr.indexOf('mobile') > 0){

                let KEYWORD_OPR= 'opt/';
                let KEYWORD_CHROME= 'crios/';
                let KEYWORD_FIREFOX= 'fxios/';
                let KEYWORD_EDG= 'edgios/';
                let KEYWORD_SAFARI= 'version/'; 

                if(lowerStr.indexOf(KEYWORD_OPR) > -1){

                    startIdx = lowerStr.indexOf(KEYWORD_OPR);
                    
                    name = "Opera";

                    version = browserUserAgentString.substring(startIdx + KEYWORD_OPR.length);

                }else if(lowerStr.indexOf(KEYWORD_CHROME) > -1){

                    startIdx = lowerStr.indexOf(KEYWORD_CHROME);
                    
                    endIdx = lowerStr.indexOf(' ', startIdx + KEYWORD_CHROME.length);

                    name = "Chrome";

                    version = browserUserAgentString.substring(startIdx + KEYWORD_CHROME.length, endIdx);
                }else if(lowerStr.indexOf(KEYWORD_FIREFOX) > -1){

                    startIdx = lowerStr.indexOf(KEYWORD_FIREFOX);

                    endIdx = lowerStr.indexOf(' ', startIdx + 1);

                    name = "Firefox";

                    version = browserUserAgentString.substring(startIdx + KEYWORD_FIREFOX.length, endIdx);
                }else if(lowerStr.indexOf(KEYWORD_EDG) > -1){

                    startIdx = lowerStr.indexOf(KEYWORD_EDG);

                    endIdx = lowerStr.indexOf(' ', startIdx + 1);

                    name = "Microsoft Edge";

                    version = browserUserAgentString.substring(startIdx + KEYWORD_EDG.length, endIdx);
                }else{

                    name = 'Safari';

                    startIdx = lowerStr.indexOf(KEYWORD_SAFARI);

                    endIdx = lowerStr.indexOf(' ', startIdx + 1);

                    version = browserUserAgentString.substring(startIdx + KEYWORD_SAFARI.length, endIdx);
                }
            }
            // web browser on desktop or laptop OS.
            else{

                let KEYWORD_OPR= 'opr/';
                let KEYWORD_CHROME= 'chrome/';
                let KEYWORD_FIREFOX= 'firefox/';
                let KEYWORD_EDG= 'edg/';
                let KEYWORD_SAFARI= 'version/';

                if(lowerStr.indexOf(KEYWORD_OPR) > -1){

                    keyword = ''

                    startIdx = lowerStr.indexOf(KEYWORD_OPR);

                    name = "Opera";

                    version = browserUserAgentString.substring(startIdx + KEYWORD_OPR.length);

                }else if(lowerStr.indexOf(KEYWORD_EDG) > -1){

                    startIdx = lowerStr.indexOf(KEYWORD_EDG);

                    name = "Microsoft Edge";

                    version = browserUserAgentString.substring(startIdx + KEYWORD_EDG.length);
                }else if(lowerStr.indexOf(KEYWORD_FIREFOX) > -1){

                    startIdx = lowerStr.indexOf(KEYWORD_FIREFOX);

                    name = "Firefox";

                    version = browserUserAgentString.substring(startIdx + KEYWORD_FIREFOX.length);
                }else if(lowerStr.indexOf(KEYWORD_CHROME) > -1){

                    startIdx = lowerStr.indexOf(KEYWORD_CHROME);

                    endIdx = lowerStr.indexOf(' ', startIdx + 1);

                    name = "Chrome";

                    version = browserUserAgentString.substring(startIdx + KEYWORD_CHROME.length, endIdx);
                }else{

                    name = 'Safari';

                    startIdx = lowerStr.indexOf(KEYWORD_SAFARI);

                    endIdx = lowerStr.indexOf(' ', startIdx + 1);

                    version = browserUserAgentString.substring(startIdx + KEYWORD_SAFARI.length, endIdx);
                }
            }

            ret.push(name);
            ret.push(version);
            ret.push(deviceOS);

        }
    }

    return ret;
}
    
</script>
<style>
    .block{
        display:block; 
        margin-top: 10px;
    }
</style>
</head>
<body onload="getBrowserInfo()">
<h3>How To Use Javascript To Get Web Browser Name And Version Example.</h3>
<div id="browserUserAgent" class="block"></div>
<div id="browserName" class="block"></div>
<div id="browserVersion" class="block"></div>
<div id="browserRunningDevice" class="block"></div>
</body>
</html>

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.