Semver Range Checker — Free HTML CSS JS Snippet

Package managers like npm decide which version to install based on a range expression in package.json — ^2.1.0, ~1.4.2, >=1.2.0 <2.0.0, 1.x || 2.x — and the exact meaning of each syntax is a frequent source of "why did it install that version" confusion. This snippet implements the real semantic versioning comparison and range-matching rules from scratch in vanilla JavaScript, following the same logic node-semver uses.

Parsing a version into comparable parts

parseVersion() matches a string against the semver grammar — major.minor.patch with an optional -prerelease suffix and an optional +build metadata suffix — and returns the three numeric components plus the prerelease identifiers split on .. Build metadata is deliberately parsed but discarded from comparison entirely, exactly as the semver spec requires: two versions differing only in build metadata are considered equal.

Comparing prerelease identifiers correctly, not just alphabetically

The semver spec's prerelease comparison rule is subtle: identifiers consisting only of digits are compared numerically, while any other identifier is compared as a string, and a version with prerelease identifiers always sorts *before* the same version without any (1.0.0-beta is less than 1.0.0). comparePrerelease() implements exactly this — checking each dot-separated identifier with /^\d+$/ to decide whether to compare it as a number or a string, and treating a shorter identifier list as lower precedence per the spec.

Expanding caret and tilde ranges into explicit bounds

Rather than special-casing ^ and ~ throughout the matching logic, expandCaretTilde() converts each into an equivalent explicit >=lower <upper comparator pair up front. Tilde (~1.4.2) allows patch-level changes only, expanding to >=1.4.2 <1.5.0. Caret (^2.1.0) allows changes that do not modify the leftmost non-zero digit — for a version with a nonzero major it expands to >=2.1.0 <3.0.0, but for a zero-major version like ^0.2.3 it correctly narrows to >=0.2.3 <0.3.0, matching npm's "0.x is not yet stable, treat minor bumps as breaking" convention that trips up most hand-rolled semver implementations.

Wildcards, comparator sets, and OR unions

A bare 1.x or 2.* is parsed as a wildcard comparator matching any minor/patch within that major. Space-separated comparators within one range segment are ANDed together (all must match, as in >=1.2.0 <2.0.0), while segments separated by || are ORed (any one segment matching is enough), matching npm's exact range grammar. satisfies() splits on || first, then evaluates each space-separated comparator set independently until one fully matches.

A standalone comparator for direct version-to-version ordering

Below the range checker, a second tool compares two raw versions directly using the same compareVersions() function, useful for answering "is 1.9.0 actually less than 1.10.0" — a classic string-comparison trap, since "1.9.0" < "1.10.0" is false when compared as plain strings but true under real numeric semver ordering.