Regex - match range of characters with a quantifier that only matches numbers

Mastering Regex: Matching Number Ranges with Quantifiers in JavaScript

Learn how to construct powerful regular expressions in JavaScript to match specific ranges of numbers using quantifiers, ensuring robust data validation and extraction.

Regular expressions (regex) are an indispensable tool for pattern matching in strings. When dealing with numerical data, a common requirement is to match numbers within a specific range, often with a defined length. This article will guide you through using regex quantifiers in JavaScript to precisely target and validate numerical ranges, focusing on scenarios where you need to match only digits.

Understanding Quantifiers for Number Ranges

Quantifiers in regex specify how many instances of a character, group, or character class must be present for a match to occur. When working with numbers, the character class \d (which matches any digit from 0-9) is fundamental. Combining \d with quantifiers allows us to define the exact length of the number we want to match.

For example, \d{3} matches exactly three digits. \d{1,5} matches between one and five digits. However, simply matching the length isn't enough to enforce a numerical range (e.g., matching numbers between 100 and 200). For true range matching, we often need to combine specific digit patterns with quantifiers.

flowchart TD
    A[Start] --> B{"Need to match a number range?"}
    B -->|Yes| C{Determine Min/Max Length}
    C --> D{Break down range into digit patterns}
    D --> E["Use `\d` for digits"]
    E --> F["Apply quantifiers `{n}`, `{n,m}`"]
    F --> G["Combine patterns with `|` (OR)"]
    G --> H[Construct Regex]
    H --> I[Test and Refine]
    B -->|No| J[Use simple `\d` with quantifiers for length only]
    I --> K[End]
    J --> K

Workflow for constructing regex to match number ranges.

Matching Specific Number Ranges

To match a specific range, such as numbers between 0 and 255 (common for IP addresses), you cannot simply use [0-255]. Regular expressions interpret [ ] as a character set, meaning [0-255] would match a single character that is '0', '2', or '5'. Instead, you must break down the range into distinct patterns based on the number of digits and their leading values.

Consider the range 0-255:

• Single digits: [0-9] (0 to 9)
• Two digits: [1-9]\d (10 to 99)
• Three digits:
  • 1\d\d (100 to 199)
  • 2[0-4]\d (200 to 249)
  • 25[0-5] (250 to 255)

Combining these with the OR operator (|) creates a comprehensive regex for the entire range.

const regex0to255 = /(?:[0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])/;

console.log(regex0to255.test('5'));   // true
console.log(regex0to255.test('42'));  // true
console.log(regex0to255.test('150')); // true
console.log(regex0to255.test('249')); // true
console.log(regex0to255.test('255')); // true
console.log(regex0to255.test('256')); // false
console.log(regex0to255.test('007')); // true (matches '0', then '0', then '7' - careful with leading zeros)
console.log(regex0to255.test('300')); // false

Regex for matching numbers between 0 and 255.

Handling Leading Zeros and Anchors

When matching numbers, especially in a range, you might need to consider how leading zeros are handled. The previous example (?:[0-9]|[1-9]\d|...) would match 05 as 5 (the [0-9] part) and then 0 and 5 as separate matches if not anchored. If you want to strictly match numbers without leading zeros (unless it's just '0' itself), you need to adjust your patterns.

To ensure the entire string or a specific part of it matches only the number, use anchors: ^ for the start of the string and $ for the end of the string. For example, ^\d{3}$ would match exactly three digits and nothing else in the string.

// Regex for 0-255, strictly without leading zeros (except for '0')
const regexStrict0to255 = /^(?:0|[1-9]\d?|1\d\d|2[0-4]\d|25[0-5])$/;

console.log(regexStrict0to255.test('0'));    // true
console.log(regexStrict0to255.test('5'));    // true
console.log(regexStrict0to255.test('05'));   // false (no leading zero)
console.log(regexStrict0to255.test('42'));   // true
console.log(regexStrict0to255.test('150'));  // true
console.log(regexStrict0to255.test('255'));  // true
console.log(regexStrict0to255.test('256'));  // false
console.log(regexStrict0to255.test('007'));  // false
console.log(regexStrict0to255.test(' 5 '));  // false (due to anchors)

Regex for 0-255, strictly matching without leading zeros and anchored to the string.