Convert Figma logo to code with AI

faisalman logoua-parser-js

UAParser.js - The Essential Web Development Tool for User-Agent Detection.

9,074
1,187
9,074
16

Top Related Projects

The Universal Device Detection library will parse any User Agent and detect the browser, operating system, device used (desktop, tablet, mobile, tv, cars, console, etc.), brand and model.

Browser sniffing gone too far — A useragent parser library for PHP

A multi-language port of Browserscope's user agent parser.

Quick Overview

UA-Parser.js is a lightweight JavaScript library for parsing user agent strings. It provides detailed information about the browser, operating system, and device from a given user agent string. This library is useful for web developers and analysts who need to understand and categorize their users' browsing environments.

Pros

  • Lightweight and fast, with no dependencies
  • Supports both browser and Node.js environments
  • Regularly updated with new user agent patterns
  • Extensive test coverage and community support

Cons

  • May not always be 100% accurate due to the ever-changing nature of user agent strings
  • Requires manual updates to keep up with new browser and device releases
  • Limited information for less common or older devices and browsers

Code Examples

Parsing a user agent string:

const parser = new UAParser();
const result = parser.setUA('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36').getResult();
console.log(result);

Getting specific information:

const parser = new UAParser();
console.log(parser.getBrowser());
console.log(parser.getOS());
console.log(parser.getDevice());

Using custom regular expressions:

const parser = new UAParser();
parser.setUA('Mozilla/5.0 MyCustomAgent/1.0');
parser.browser.set('MyBrowser', 'MyBrowser', '1.0');
console.log(parser.getBrowser());

Getting Started

  1. Install the library:

    npm install ua-parser-js
    
  2. Import and use in your project:

    import UAParser from 'ua-parser-js';
    
    const parser = new UAParser();
    const result = parser.getResult();
    console.log(result);
    
  3. For browser usage, include the script in your HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/1.0.2/ua-parser.min.js"></script>
    <script>
      var parser = new UAParser();
      var result = parser.getResult();
      console.log(result);
    </script>
    

Competitor Comparisons

The Universal Device Detection library will parse any User Agent and detect the browser, operating system, device used (desktop, tablet, mobile, tv, cars, console, etc.), brand and model.

Pros of device-detector

  • More comprehensive device detection, including operating systems, browsers, and bots
  • Regularly updated database of user agents and device information
  • Supports multiple programming languages through various implementations

Cons of device-detector

  • Larger file size and potentially higher memory usage due to extensive database
  • May have a steeper learning curve for basic use cases
  • Requires more frequent updates to maintain accuracy

Code Comparison

device-detector:

$dd = new DeviceDetector($userAgent);
$dd->parse();
$clientInfo = $dd->getClient();
$osInfo = $dd->getOs();
$device = $dd->getDeviceName();

ua-parser-js:

var parser = new UAParser();
var result = parser.setUA(userAgent).getResult();
var browser = result.browser;
var os = result.os;
var device = result.device;

Both libraries offer similar functionality for parsing user agent strings, but device-detector provides more detailed information and supports a wider range of devices and platforms. ua-parser-js is more lightweight and easier to integrate for simple use cases, while device-detector offers more comprehensive detection capabilities at the cost of increased complexity and resource usage.

Browser sniffing gone too far — A useragent parser library for PHP

Pros of Parser-PHP

  • More comprehensive device and browser detection
  • Regularly updated with new user agent patterns
  • Supports server-side PHP environments

Cons of Parser-PHP

  • Slower parsing speed compared to ua-parser-js
  • Larger file size and memory footprint
  • Limited to PHP environments, less versatile across platforms

Code Comparison

Parser-PHP:

$result = new WhichBrowser\Parser($_SERVER['HTTP_USER_AGENT']);
echo "You are using " . $result->browser->name . " " . $result->browser->version->toString() . " on " . $result->os->name . ".";

ua-parser-js:

var parser = new UAParser();
var result = parser.getResult();
console.log("You are using " + result.browser.name + " " + result.browser.version + " on " + result.os.name + ".");

Both libraries aim to parse user agent strings, but Parser-PHP offers more detailed detection at the cost of performance and versatility. ua-parser-js is lightweight and fast, suitable for client-side parsing in JavaScript environments. The choice between them depends on the specific requirements of your project, such as the need for detailed device information or cross-platform compatibility.

A multi-language port of Browserscope's user agent parser.

Pros of ua-parser

  • Multi-language support (Java, Python, PHP, etc.)
  • More comprehensive device detection
  • Larger community and more frequent updates

Cons of ua-parser

  • Larger file size and potentially slower performance
  • More complex setup and integration
  • Less focused on JavaScript/browser environments

Code Comparison

ua-parser-js:

var parser = new UAParser();
var result = parser.getResult();
console.log(result.browser.name, result.browser.version);

ua-parser:

var parser = new UAParser();
var ua = parser.parse(navigator.userAgent);
console.log(ua.family, ua.major + '.' + ua.minor + '.' + ua.patch);

Key Differences

  1. ua-parser-js is specifically designed for JavaScript environments, while ua-parser supports multiple programming languages.
  2. ua-parser-js offers a simpler API and is more lightweight, making it easier to integrate into web projects.
  3. ua-parser provides more detailed device information but may require additional setup for JavaScript use.
  4. ua-parser-js has a more active JavaScript-focused community, while ua-parser has a broader, multi-language user base.
  5. Performance may vary, with ua-parser-js potentially being faster for JavaScript-only applications.

When choosing between the two, consider your specific use case, language requirements, and the level of detail needed in user agent parsing.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

UAParser.js

The most comprehensive, compact, & up-to-date isomorphic JavaScript library to detect user's Browser, Engine, OS, CPU, and Device type/model. Runs either in browser (client-side) or node.js (server-side).

Overview

import { UAParser } from 'ua-parser-js';

// 1. Problem: 
// Imagine getting this wild user-agent string from a visitor:
const ua = `Mozilla/5.0 (Linux; Android 10; STK-LX1 
Build/HONORSTK-LX1; wv) AppleWebKit/537.36 (KHTML, 
like Gecko) Version/4.0 Chrome/110.0.5481.153 Mobile 
Safari/537.36 musical_ly_2022803040 JsSdk/1.0 
NetType/WIFI Channel/huaweiadsglobal_int 
AppName/musical_ly app_version/28.3.4 ByteLocale/en 
ByteFullLocale/en Region/IQ Spark/1.2.7-alpha.8 
AppVersion/28.3.4 PIA/1.5.11 BytedanceWebview/d8a21c6`;
// Note: this is a real user-agent (what???)

// 2. Solution:
// Just pass the complex user-agent string to `UAParser`
const parser = new UAParser(ua);

// 3. Result:
// And voila!
console.log(parser.getBrowser());
// { name : "TikTok", version : "28.3.4", major : "28", type: undefined }

console.log(parser.getCPU());
// { architecture : undefined }

console.log(parser.getEngine());
// { name : "Blink", version : "110.0.5481.153" }

console.log(parser.getDevice());
// { type : "mobile", vendor : "Huawei", model : "STK-LX1" }

console.log(parser.getOS());
// { name : "Android", version : "10" }

console.log(parser.getResult());
/*
{
    ua: "Mozilla/5.0 (Linux; Android 10; STK-LX1 Build/HONORSTK-LX1; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/110.0.5481.153 Mobile Safari/537.36 musical_ly_2022803040 JsSdk/1.0 NetType/WIFI Channel/huaweiadsglobal_int AppName/musical_ly app_version/28.3.4 ByteLocale/en ByteFullLocale/en Region/IQ Spark/1.2.7-alpha.8 AppVersion/28.3.4 PIA/1.5.11 BytedanceWebview/d8a21c6",
    browser: {
        name: "TikTok",
        version: "28.3.4",
        major: "28"
    },
    cpu: {},
    device: {
        type: "mobile",
        model: "STK-LX1",
        vendor: "Huawei"
    },
    engine: {
        name: "Blink",
        version: "110.0.5481.153"
    },
    os: {
        name: "Android",
        version: "10"
    }
}
*/

// 4. Conclusion:
// The visitor is browsing from a TikTok app using an Android-powered Huawei device
// Phew! Thanks, UAParser.js!

Documentation

Before upgrading from v0.7 / v1.0, please read CHANGELOG to see what's new & breaking.

License Options

Open-Source Editions PRO / Commercial Editions
License options MIT (v1.x) AGPL (v2.x) PRO Personal PRO Business PRO Enterprise
Browser detection ⚠️ ✅ ✅ ✅ ✅
CPU detection ⚠️ ✅ ✅ ✅ ✅
Device detection ⚠️ ✅ ✅ ✅ ✅
Engine detection ⚠️ ✅ ✅ ✅ ✅
OS detection ⚠️ ✅ ✅ ✅ ✅
Enhanced detection ⛔️ ✅ ✅ ✅ ✅
Client Hints support ⛔️ ✅ ✅ ✅ ✅
Extras (Apps, Bots, Libs, Emails, Media Players, etc) ⛔️ ✅ ✅ ✅ ✅
CommonJS support ✅ ✅ ✅ ✅ ✅
ES modules support ⛔️ ✅ ✅ ✅ ✅
npm module available ✅ ✅ ✅ ✅ ✅
TypeScript declarations available ⚠️ ✅ ✅ ✅ ✅
Allowed for commercial use ✅ ✅ ⛔️ ✅ ✅
Permissive (non-copyleft) license ✅ ⛔️ ✅ ✅ ✅
Unlimited use per 1 license ✅ ✅ ✅ ⚠️ ✅
1-year support ⛔️ ⛔️ ✅ ✅ ✅
Lifetime updates ✅ ✅ ✅ ✅ ✅
Price FREE (License) FREE (License) $12 (License) $25 (License) $500 (License)
GET THE PRO PACKAGES 📥

Development

Contributors

Please read CONTRIBUTING guide first for the instruction details.

Made with contributors-img.

Backers & Sponsors

NPM DownloadsLast 30 Days