User-Agent String Parser — Browser, OS & Device Detector

A User-Agent header is a dense, historically accreted string that packs browser identity, rendering engine, operating system, and device hints into one line — and it is famously unreliable because nearly every browser lies about being several other browsers at once for compatibility reasons. This snippet parses that string using the same kind of ordered regex pattern-matching real user-agent detection libraries use, breaking it into browser, engine, OS, and device type, plus every individual product/version token found.

Why browser detection has to check in a specific order

detectBrowser() runs a sequence of regex checks in a very deliberate order, because most browsers include misleading substrings inherited from Safari and Chrome compatibility. A real Chrome UA contains Safari/537.36; a real Edge UA contains both Chrome/ and Safari/; an Opera UA also contains Chrome/. Checking for Edg/ before Chrome/, and Chrome/ before Safari/, is what makes the detection correct — reversing that order would misidentify Edge and Opera as plain Chrome. The final catch for Safari is Version\/([\d.]+).*Safari, deliberately using the Version/ token rather than the Safari/ build number, since Safari's actual user-facing version number lives in Version/, not in the WebKit-derived Safari/ number that other browsers also carry.

Distinguishing the rendering engine from the browser brand

detectEngine() is intentionally separate from browser detection because engine and brand do not map one-to-one: Edge, Opera, and Chrome are all different brands running the same Blink engine, distinguishable from Safari's WebKit only by checking for Chrome/, Chromium/, Edg/, or OPR/ tokens alongside AppleWebKit. This separation mirrors how real compatibility decisions get made in practice — a rendering bug is usually an engine-level issue affecting every Blink-based browser identically, not a Chrome-specific one.

Operating system version formatting

Apple's own UA convention encodes OS version numbers with underscores instead of dots (iPhone OS 17_4), a historical artifact of early UA string generation. detectOS() matches that pattern and replaces underscores with dots via .replace(/_/g, '.') before display, so "17_4" reads as the expected "17.4". Windows versions are translated through a small lookup table, since Windows NT kernel version numbers (like 10.0) do not match their marketing names — Windows NT 10.0 covers both Windows 10 and Windows 11, which the UA string genuinely cannot distinguish between.

Device type from Mobile and tablet-specific hints

detectDevice() checks for iPad, iPhone, and Android's own combination of an Android token with or without a separate Mobile token — Android's convention is that phone UAs include the word Mobile while tablet UAs omit it, a subtle distinction that a naive "if it says Android, it's a phone" check would get wrong.

Extracting every product/version token generically

Beyond the specific browser/OS/device detection, extractTokens() runs a general regex, /([A-Za-z][A-Za-z0-9._-]*)\/([\d][\d.]*)/g, matching the standard User-Agent grammar of "Product/Version" pairs, and lists every one found as a chip. This surfaces tokens the targeted detectors above do not specifically name — build identifiers, embedded WebView versions, or app-specific tokens some UAs append — useful when debugging a UA string that does not match any of the well-known patterns cleanly.