.env File Parser & Validator — Free HTML CSS JS Snippet

A .env file looks trivially simple — one KEY=VALUE pair per line — but it is surprisingly easy to introduce a subtle bug: a duplicate key where only the last value silently wins, a variable name with an invalid character, or quoting that does not match what the loading library actually expects. This snippet parses real .env syntax entirely in the browser and surfaces exactly those problems before they cause a confusing runtime bug.

Line-by-line parsing that mirrors how dotenv loaders actually work

parseEnv() splits the input on newlines and processes each line independently, skipping blank lines and full-line comments starting with # — the same convention used by the dotenv npm package and most language equivalents. Each remaining line is split on the first = character only, via indexOf('=') rather than split('='), which matters because a value like DATABASE_URL=postgres://user:pass@host/db?ssl=true legitimately contains additional = characters after the first one — splitting on every occurrence would truncate the value.

Validating the variable name, not just its presence

Every key is checked against /^[A-Za-z_][A-Za-z0-9_]*$/, matching the actual identifier rules most language environment-variable APIs enforce: a variable name must start with a letter or underscore and contain only letters, digits, and underscores after that. A line like NOT VALID LINE HERE (no = at all) or a key starting with a digit is reported with its exact line number rather than silently ignored or half-parsed.

Stripping quotes the way real loaders do

.env values are commonly wrapped in single or double quotes to preserve leading/trailing whitespace or embed special characters. stripQuotes() checks whether the trimmed value both starts and ends with a matching quote character before removing them — a value with only a leading quote is left untouched rather than partially stripped, since that mismatch is far more likely to be a typo than an intentional unbalanced quote.

Flagging every occurrence of a duplicate key

Most .env loaders resolve a duplicate key by silently keeping whichever assignment appears last, which is exactly the kind of bug that is invisible until a value mysteriously does not match what was set higher in the file. The parser counts occurrences of each key across the whole file and marks every row sharing a repeated key — not just the second one — so both the shadowed value and the value that wins are equally visible in the table.

Inferring a lightweight type per value

detectType() classifies each parsed value as boolean, number, URL, empty, or plain string using simple pattern checks. This is not a strict schema — .env values are always strings at runtime — but the inferred type column makes it easy to spot a value that looks wrong for its apparent purpose, like a PORT value that is not actually numeric.

Generating a redacted .env.example and a JSON view

The tool separately builds two derived outputs: a .env.example where every key keeps its name but the value is replaced with a type-appropriate placeholder (true for booleans, 0 for numbers, https:// for URLs, empty for strings) so real secrets never appear in a template file meant for version control, and a plain JSON object mapping keys to their real values for quick programmatic use elsewhere.