User Agent parsing in Javascript

user agent parser
javascript detect browser
javascript user agent detection
ua-parser-js typescript
npm user-agent parser
user agent js
get browser name from user agent string
user agent example

I need to extract the Operating System's name and the browser's name from the user agent string.

Sample of user agent:

Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2.9) Gecko/20100825 Ubuntu/9.10 (karmic) Firefox/3.6.9

How can I get just the operating system (example "Linux i686" and "Firefox 3.6.9")?

Here is my codes in fiddle link which is as follows:

function getBrowserAndOS(userAgent, elements) {
  var browserList = {
      'Chrome': [/Chrome\/(\S+)/],
      'Firefox': [/Firefox\/(\S+)/],
      'MSIE': [/MSIE (\S+);/],
      'Opera': [
        /Opera\/.*?Version\/(\S+)/,
        /Opera\/(\S+)/
      ],
      'Safari': [/Version\/(\S+).*?Safari\//]
    },
    re, m, browser, version;


  var osList = {
      'Windows': [/Windows\/(\S+)/],
      'Linux': [/Linux\/(\S+)/]
    },
    re2, m2, os;

  if (userAgent === undefined)
    userAgent = navigator.userAgent;

  if (elements === undefined)
    elements = 2;
  else if (elements === 0)
    elements = 1337;

  for (browser in browserList) {
    while (re = browserList[browser].shift()) {
      if (m = userAgent.match(re)) {
        version = (m[1].match(new RegExp('[^.]+(?:\.[^.]+){0,' + --elements + '}')))[0];
        //version = (m[1].match(new RegExp('[^.]+(?:\.[^.]+){0,}')))[0];
        //return browser + ' ' + version;
        console.log(browser + ' ' + version);
      }
    }
  }


  for (os in osList) {
    while (re2 = osList[os].shift()) {
      if (m2 = userAgent.match(re2)) {
        //version = (m[1].match(new RegExp('[^.]+(?:\.[^.]+){0,' + --elements + '}')))[0];
        //version = (m[1].match(new RegExp('[^.]+(?:\.[^.]+){0,}')))[0];
        //return browser + ' ' + version;
        console.log(os);
      }

    }
  }

  return null;
}

console.log(getBrowserAndOS(navigator.userAgent, 2));

I wouldn't recommend doing this yourself. I'd use a parser like Platform.js, which works like this:

<script src="platform.js"></script>
<script>
var os = platform.os;
var browser = platform.name + ' ' + platform.version;
</script>

User Agent parsing in Javascript, I wouldn't recommend doing this yourself. I'd use a parser like Platform.js, which works like this: <script src="platform.js"></script> <script> var os = platform.os;� Definition and Usage The userAgent property returns the value of the user-agent header sent by the browser to the server. The value returned, contains information about the name, version and platform of the browser. Note: This property is read-only.

Useragents aren't a set of metadata useful for asking qualitative questions such as "what are you?", they're really only useful for yes/no questions like "are you linux?", or "what version of Firefox are you?".

Let me illustrate, here's a script that converts useragents to lovely json-serialisable objects:

parseUA = (() => {
    //useragent strings are just a set of phrases each optionally followed by a set of properties encapsulated in paretheses
    const part = /\s*([^\s/]+)(\/(\S+)|)(\s+\(([^)]+)\)|)/g;
    //these properties are delimited by semicolons
    const delim = /;\s*/;
    //the properties may be simple key-value pairs if;
    const single = [
        //it is a single comma separation,
        /^([^,]+),\s*([^,]+)$/,
        //it is a single space separation,
        /^(\S+)\s+(\S+)$/,
        //it is a single colon separation,
        /^([^:]+):([^:]+)$/,
        //it is a single slash separation
        /^([^/]+)\/([^/]+)$/,
        //or is a special string
        /^(.NET CLR|Windows)\s+(.+)$/
    ];
    //otherwise it is unparsable because everyone does it differently, looking at you iPhone
    const many = / +/;
    //oh yeah, bots like to use links
    const link = /^\+(.+)$/;

    const inner = (properties, property) => {
        let tmp;

        if (tmp = property.match(link)) {
            properties.link = tmp[1];
        }
        else if (tmp = single.reduce((match, regex) => (match || property.match(regex)), null)) {
            properties[tmp[1]] = tmp[2];
        }
        else if (many.test(property)) {
            if (!properties.properties)
                properties.properties = [];
            properties.properties.push(property);
        }
        else {
            properties[property] = true;
        }

        return properties;
    };

    return (input) => {
        const output = {};
        for (let match; match = part.exec(input); '') {
            output[match[1]] = {
                ...(match[5] && match[5].split(delim).reduce(inner, {})),
                ...(match[3] && {version:match[3]})
            };
        }
        return output;
    };
})();
//parseUA('user agent string here');

Using this, we can convert out the following useragents:

`Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; WOW64; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)`

{
    "Mozilla": {
        "compatible": true,
        "MSIE": "7.0",
        "Windows": "NT 6.0",
        "WOW64": true,
        "Trident": "4.0",
        "SLCC1": true,
        ".NET CLR": "3.0.30729",
        ".NET4.0C": true,
        ".NET4.0E": true,
        "version": "4.0"
    }
}

`Mozilla/5.0 (SAMSUNG; SAMSUNG-GT-S8500-BOUYGUES/S8500AGJF1; U; Bada/1.0; fr-fr) AppleWebKit/533.1 (KHTML, like Gecko) Dolfin/2.0 Mobile WVGA SMM-MMS/1.2.0 NexPlayer/3.0 profile/MIDP-2.1 configuration/CLDC-1.1 OPN-B`

{
    "Mozilla": {
        "SAMSUNG": true,
        "SAMSUNG-GT-S8500-BOUYGUES": "S8500AGJF1",
        "U": true,
        "Bada": "1.0",
        "fr-fr": true,
        "version": "5.0"
    },
    "AppleWebKit": {
        "KHTML": "like Gecko",
        "version": "533.1"
    },
    "Dolfin": {
        "version": "2.0"
    },
    "Mobile": {},
    "WVGA": {},
    "SMM-MMS": {
        "version": "1.2.0"
    },
    "NexPlayer": {
        "version": "3.0"
    },
    "profile": {
        "version": "MIDP-2.1"
    },
    "configuration": {
        "version": "CLDC-1.1"
    },
    "OPN-B": {}
}

`Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Comodo_Dragon/4.1.1.11 Chrome/4.1.249.1042 Safari/532.5`

{
    "Mozilla": {
        "Windows": "NT 5.1",
        "U": true,
        "en-US": true,
        "version": "5.0"
    },
    "AppleWebKit": {
        "KHTML": "like Gecko",
        "version": "532.5"
    },
    "Comodo_Dragon": {
        "version": "4.1.1.11"
    },
    "Chrome": {
        "version": "4.1.249.1042"
    },
    "Safari": {
        "version": "532.5"
    }
}

`Mozilla/5.0 (X11; Fedora; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36`

{
    "Mozilla": {
        "X11": true,
        "Fedora": true,
        "Linux": "x86_64",
        "version": "5.0"
    },
    "AppleWebKit": {
        "KHTML": "like Gecko",
        "version": "537.36"
    },
    "Chrome": {
        "version": "73.0.3683.86"
    },
    "Safari": {
        "version": "537.36"
    }
}

`Mozilla/5.0 (X11; Fedora; Linux x86_64; rv:66.0) Gecko/20100101 Firefox/66.0`

{
    "Mozilla": {
        "X11": true,
        "Fedora": true,
        "Linux": "x86_64",
        "rv": "66.0",
        "version": "5.0"
    },
    "Gecko": {
        "version": "20100101"
    },
    "Firefox": {
        "version": "66.0"
    }
}

`Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36`

{
    "Mozilla": {
        "X11": true,
        "Linux": "x86_64",
        "version": "5.0"
    },
    "AppleWebKit": {
        "KHTML": "like Gecko",
        "version": "537.36"
    },
    "Chrome": {
        "version": "73.0.3683.103"
    },
    "Safari": {
        "version": "537.36"
    }
}

`Mozilla/5.0 (Linux; Android 6.0.1; SM-G920V Build/MMB29K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.98 Mobile Safari/537.36`

{
    "Mozilla": {
        "Linux": true,
        "Android": "6.0.1",
        "SM-G920V": "Build/MMB29K",
        "version": "5.0"
    },
    "AppleWebKit": {
        "KHTML": "like Gecko",
        "version": "537.36"
    },
    "Chrome": {
        "version": "52.0.2743.98"
    },
    "Mobile": {},
    "Safari": {
        "version": "537.36"
    }
}

`Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1 (compatible; AdsBot-Google-Mobile; +http://www.google.com/mobile/adsbot.html)`

{
    "Mozilla": {
        "iPhone": true,
        "properties": [
            "CPU iPhone OS 9_1 like Mac OS X"
        ],
        "version": "5.0"
    },
    "AppleWebKit": {
        "KHTML": "like Gecko",
        "version": "601.1.46"
    },
    "Version": {
        "version": "9.0"
    },
    "Mobile": {
        "version": "13B143"
    },
    "Safari": {
        "compatible": true,
        "AdsBot-Google-Mobile": true,
        "link": "http://www.google.com/mobile/adsbot.html",
        "version": "601.1"
    }
}

component/user-agent-parser: Lightweight JavaScript , Deprecated: use ua-parser-js instead. Lightweight JavaScript-based User-Agent string parser. Supports browser & node.js environment. Also available as� I recently found Tobie Langel's ua-parser, a great repo which provides simple UA parsing in JavaScript, PHP, and Python. Sample User Agent 'Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B179 Safari/7534.48.3'

Were you planning to control your website’s behavior based on the browser "sniffed" from the User-Agent (UA) string?

Please don’t; use feature detection instead.

Poorly implemented (non-futureproof) User-Agent sniffing has proven to be the top compatibility problem encountered each time a new version of Internet Explorer ships. As a consequence, the logic around the user-agent string has grown increasingly complicated over the years; the introduction of Compatibility Modes has meant that the browser now has more than one UA string, and legacy extensibility of the string was deprecated after years of abuse.

By default, Internet Explorer 11 on Windows 8.1 sends the following User-Agent string:

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko

This string is deliberately designed to cause most UA-string sniffing logic to interpret it either Gecko or WebKit. This design choice was a careful one—the IE team tested many UA string variants to find out which would cause the majority of sites to "just work" for IE11 users.

Here are two links that will actually help you. You may also want to view the original source of much of my comment.

UAParser.js, UAParser.js - JavaScript library to detect browser, engine, OS, CPU, and device type/model from userAgent string. Supports browser & node.js environment. UAParser.js - JavaScript library to detect browser, engine, OS, CPU, and device type/model from userAgent string. Supports browser & node.js environment. Also available as jQuery/Zepto plugin, Bower/Meteor package, RequireJS/AMD module, & CLI tool.

This is a native JavaScript solution for identifying the OS, however would need to be manually updated whenever a new OS is introduced:

function getOs (userAgent) {

     //Converts the user-agent to a lower case string
     var userAgent = userAgent.toLowerCase();

     //Fallback in case the operating system can't be identified
     var os = "Unknown OS Platform";

     //Corresponding arrays of user-agent strings and operating systems
     match = ["windows nt 10","windows nt 6.3","windows nt 6.2","windows nt 6.1","windows nt 6.0","windows nt 5.2","windows nt 5.1","windows xp","windows nt 5.0","windows me","win98","win95","win16","macintosh","mac os x","mac_powerpc","android","linux","ubuntu","iphone","ipod","ipad","blackberry","webos"];
     result = ["Windows 10","Windows 8.1","Windows 8","Windows 7","Windows Vista","Windows Server 2003/XP x64","Windows XP","Windows XP","Windows 2000","Windows ME","Windows 98","Windows 95","Windows 3.11","Mac OS X","Mac OS X","Mac OS 9","Android","Linux","Ubuntu","iPhone","iPod","iPad","BlackBerry","Mobile"];

     //For each item in match array
     for (var i = 0; i < match.length; i++) {

              //If the string is contained within the user-agent then set the os 
              if (userAgent.indexOf(match[i]) !== -1) {
                   os = result[i];
                   break;
              }

     }

     //Return the determined os
     return os;
}

Browser detection using the user agent, When considering using the user agent string to detect which browser all browsers parse the entire script, including // sections of the code that are or < in any corresponding JavaScript because it is very easy to get these� Specifically I'm looking for something that doesn't just split the user agent into parts and give them to me, because that's as useless as the user agent itself; instead it should parse the user agent and recognize the engine, browser, OS, etc. and return the concrete parts only, as in the example.

useragent, This allows you detect if the user is browsing the web using the Chrome Frame extension. The parser returns a Agent instance, this allows you to output user agent information in different predefined formats. See the Agent section for more information. var agent = useragent. User Agent Parser performs a syntactic analysis of the user agent string and returns it as structured data in the JSON and XML format. Submit any user agent to get instructions on how to use the API to parse strings in automatic mode.

User Agent parsing: how it works and how it can be used, This information, gleaned directly from the User-Agent string itself (a process known as User-Agent parsing) typically includes browser, web rendering engine, operating system and device. Deeper information can be returned when the User-Agent string is mapped to an additional set of data about the underlying device. The parseInt () function parses a string and returns an integer. The radix parameter is used to specify which numeral system to be used, for example, a radix of 16 (hexadecimal) indicates that the number in the string should be parsed from a hexadecimal number to a decimal number.

Navigator userAgent Property, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java�

Comments
  • What is the point of the single value arrays?
  • @RPM I guess the intent is that you could have multiple REs in the array, and it will try them all to decide that you're running that OS.
  • Encouraging web programmers to write logic based on User Agent is a sin that leads to horrible, buggy websites.
  • using a whole library just to get the OS name and Browser's name does not look good to me. I already parsed the Browser's name but not the OS name. Do you have any idea how to parse just to get the OS name?
  • Don't treat feature detection as Universal Truth. Sometimes there's no choice but to sniff the browser. For example, right at the moment I'm dealing with a bug in the current version of Safari. BG color should be transparent. Safari tells the javascript it is transparent. But it's quite clearly white. (Safari hasn't applied the CSS properly.) This is fixed in the tech preview, but I still need to control for this particular browser's bad behavior somehow, and sniffing is the best shot I have.