How can I detect the exact browser version and operating system using JavaScript?

General Discussions
1

I’m trying to write a script that can accurately detect a user’s browser version and OS.

I used navigator.userAgent to extract info, and while it works in Chrome and Firefox, it doesn’t seem reliable in older browsers like IE6.

Here’s a snippet of what I tried:

<div id="example"></div>

<script type="text/javascript">
let txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt += "<p>Browser Name: " + navigator.appName + "</p>";
txt += "<p>Browser Version: " + navigator.appVersion + "</p>";
txt += "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt += "<p>Platform: " + navigator.platform + "</p>";
txt += "<p>User-agent header: " + navigator.userAgent + "</p>";

document.getElementById("example").innerHTML = txt;
</script>

The output includes the user-agent string, but I only want to extract the browser version (e.g., Firefox/12.0) from it.

Is there a more reliable way in modern JavaScript to answer “what version of browser am I using”, including handling inconsistencies across browsers and older versions?

2

I’ve dealt with this while supporting a legacy analytics dashboard where we needed to track browser usage, including older versions like IE6.

The key was parsing navigator.userAgent manually using regex.

Here’s a quick function I used:

function getBrowserInfo() {
  const ua = navigator.userAgent;
  let browser, version;

  if (/firefox\/([\d.]+)/i.test(ua)) {
    browser = 'Firefox';
    version = RegExp.$1;
  } else if (/chrome\/([\d.]+)/i.test(ua)) {
    browser = 'Chrome';
    version = RegExp.$1;
  } else if (/msie\s([\d.]+)/i.test(ua) || /trident.*rv:([\d.]+)/i.test(ua)) {
    browser = 'Internet Explorer';
    version = RegExp.$1;
  } else if (/safari\/([\d.]+)/i.test(ua) && !/chrome/i.test(ua)) {
    browser = 'Safari';
    version = RegExp.$1;
  }

  return `${browser} ${version}`;
}

It’s not foolproof but works surprisingly well across most browsers, even older ones.

3

Hello @dipen-soni, Your way of solution is unique, but when I needed to do detailed browser and OS detection for custom UI tweaks, I used a library called Bowser.

It abstracts a lot of the quirks for you:

import Bowser from 'bowser';

const browser = Bowser.getParser(window.navigator.userAgent);
console.log(browser.getBrowser());
console.log(browser.getOS());

This was a game-changer for us, especially with mobile detection and edge cases.

If you’re working on modern apps but still need some backward compatibility, Bowser keeps things clean.

4

In one of my earlier projects, we had to support embedded systems using outdated versions of IE and Safari.

Instead of relying purely on navigator, I ended up building a fallback using conditional comments (for IE < 10) and sniffing for specific features:

function detectIEVersion() {
  var ua = window.navigator.userAgent;
  var msie = ua.indexOf('MSIE ');
  if (msie > 0) {
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
  }
  var trident = ua.indexOf('Trident/');
  if (trident > 0) {
    var rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
  }
  return false;
}

Not ideal for modern development, but for legacy systems, this gave us the precision we needed.