Everyday patterns: emails, URLs, and numbers

Understanding Everyday patterns: emails, URLs, and numbers

These three formats tempt you into writing a full grammar with a regex, and email is the clearest warning. The address grammar in RFC 5322 permits quoted local parts, comments in parentheses, and folded whitespace, so a genuinely conformant pattern runs to hundreds of characters and still answers the wrong question: shape, not deliverability. ada@gmial.com is flawless syntax and lands nowhere, so treat the regex as a typo filter (one @, no spaces, a dot in the domain) and let a confirmation email do the validating.

For URLs the runtime already ships a parser the whole web agrees on, so use a regex only to locate candidates in free text and hand each candidate to new URL(). That split keeps ports, percent-encoding, IPv6 hosts, punycode, and relative references out of your pattern, and hands back protocol, hostname, pathname, and searchParams already separated. The parse doubles as the validity test, because an unparseable string throws instead of quietly matching something close.

Numbers are where the pattern and the conversion disagree in ways that leak into stored data. Number() trims whitespace, accepts 0x1f and Infinity, and turns an empty string into 0; parseFloat() reads a leading prefix and ignores the junk in 12px; your anchored pattern does exactly what you wrote and nothing more. Decide in words whether a leading +, a bare .5, an exponent, or thousands separators are legal, encode that one decision in an anchored pattern, and convert only afterwards. Locale text like 1.234,56 has to be normalized by you, since no pattern can guess whether a dot is a decimal point or a group separator.

// One @, no spaces, a dot in the domain: a typo filter, not a validator.
const emailish = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
for (const e of ['ada@example.com', 'ada@example', 'a b@example.com', 'ada+tag@mail.example.co.uk']) {
  console.log(`email ${e} -> ${emailish.test(e)}`);
}

// The regex only finds a candidate; URL decides whether it is really a URL.
for (const link of ['https://example.com/docs?q=regex#top', 'example.com', 'ftp://files.example.com/x']) {
  try {
    const u = new URL(link);
    console.log(`url   ${link} -> ${u.protocol} ${u.hostname} ${u.pathname}`);
  } catch {
    console.log(`url   ${link} -> not an absolute URL`);
  }
}

// A pattern and Number() are two different definitions of a number.
const numberish = /^-?\d+(?:\.\d+)?$/;
for (const n of ['42', '-3.5', '3.', '1e3', '1,234']) {
  console.log(`num   ${n} -> pattern ${numberish.test(n)}, Number ${Number(n)}`);
}

Worked examples

const text = 'Docs at https://example.com/a, mirror at (http://sub.example.org:8080/b?x=1).';
const scan = /\bhttps?:\/\/\S+/g;

for (const hit of text.match(scan)) {
  const cleaned = hit.replace(/[.,;:)]+$/, '');
  const u = new URL(cleaned);
  console.log(`${cleaned} | host=${u.host} | search=${u.search || '(none)'}`);
}

const numeric = /^[+-]?(?:\d+|\d*\.\d+)(?:[eE][+-]?\d+)?$/;

for (const s of ['12', '+0.5', '.5', '1_000', '12px', '0x1f', ' 7 ']) {
  console.log(`[${s}] pattern=${numeric.test(s)} Number=${Number(s)} parseFloat=${parseFloat(s)}`);
}

const anchored = /^[^\s@]+@[^\s@]+\.[a-z]{2,}$/i;
const unanchored = /[^\s@]+@[^\s@]+\.[a-z]{2,}/i;
const field = '  Ada@Example.COM ';

console.log('unanchored on a sentence:', unanchored.test('name <ada@example.com> here'));
console.log('anchored on a sentence:', anchored.test('name <ada@example.com> here'));
console.log('anchored on the raw field:', anchored.test(field));
console.log('anchored after cleaning:', anchored.test(field.trim().toLowerCase()));

Important notes

Common mistakes

Try it yourself