Skip to main content

How to Resolve the "SyntaxError: Invalid regular expression: Range out of order" Error in JavaScript

The SyntaxError: Invalid regular expression: ...: Range out of order in character class is a common error that occurs when a regular expression is constructed with a malformed range inside a character set ([...]). It almost always involves a misplaced hyphen (-).

This guide will explain what a "range out of order" means, the common mistakes that cause this error, and the simple, correct ways to include a literal hyphen in your character set.

The Core Problem: Ranges in Character Classes​

In a regular expression, a character set [...] is used to match any single character from a list. A hyphen (-) inside a character set has a special meaning: it is used to define a range of characters.

  • [a-z]: Matches any lowercase letter from 'a' to 'z'.
  • [0-9]: Matches any digit from '0' to '9'.
  • [A-C]: Matches 'A', 'B', or 'C'.

A range is "in order" if the character on the left comes before the character on the right in the character encoding table (like ASCII or Unicode). [a-z] is valid, but [z-a] is a "range out of order."

The Cause of the Error: A Misplaced Hyphen​

The error occurs when the regex engine tries to interpret a hyphen as a range, but the characters on either side of it do not form a valid, ordered range.

For example, imagine you want to match lowercase letters, uppercase letters, or a hyphen. A common mistake is to place the hyphen in the middle.

// Problem: The hyphen between 'a-z' and 'A-Z' is ambiguous.
const text = 'hello-world';
const regex = /[a-z-A-Z]/; // ⛔️ SyntaxError: Invalid regular expression: /[a-z-A-Z]/: Range out of order in character class

console.log(regex.test(text));
note

Why this fails: The regex engine sees z-A and tries to create a range. In the ASCII table, 'z' comes after 'A', so the range is "out of order," and the syntax error is thrown.

The Solutions​

To include a literal hyphen in your character set, you must place it in a position where it cannot be misinterpreted as part of a range.

This is the cleanest and most readable solution. When a hyphen is the very first or very last character in a character set, it loses its special meaning and is treated as a literal character.

const text = 'hello-world';

// ✅ Solution 1: Place the hyphen at the beginning.
const regex1 = /[-a-zA-Z]/;
console.log(regex1.test(text)); // Output: true

// ✅ Solution 2: Place the hyphen at the end.
const regex2 = /[a-zA-Z-]/;
console.log(regex2.test(text)); // Output: true
note

Both of these regular expressions correctly match any lowercase letter, any uppercase letter, or a hyphen. This is the recommended best practice.

Escape the Hyphen with a Backslash​

You can also treat the hyphen as a literal character by "escaping" it with a backslash (\).

const text = 'hello-world';

// ✅ Solution 3: Escape the hyphen.
const regex = /[a-z\-A-Z]/;

console.log(regex.test(text)); // Output: true
note

While this works, it can make the regular expression harder to read, especially with other escaped characters. Placing the hyphen at the beginning or end is generally preferred for clarity.

Practical Example: Matching a String with Hyphens​

Let's create a regex to validate a simple product ID format, which should only contain uppercase letters, numbers, and hyphens.

function isValidProductId(id) {
  // The regex matches a string that contains one or more (+)
  // characters that are either uppercase letters (A-Z),
  // numbers (0-9), or a hyphen (-).
  // The ^ and $ anchors ensure the ENTIRE string must match this pattern.
  const regex = /^[A-Z0-9-]+$/;
  return regex.test(id);
}

// Example Usage:
console.log(isValidProductId('PROD-123-XYZ'));  // Output: true
console.log(isValidProductId('PROD_123'));      // Output: false (contains an underscore)
console.log(isValidProductId('prod-123'));      // Output: false (contains lowercase letters)
note

In this example, the hyphen is placed at the end of the character set ([A-Z0-9-]), which is the clean, recommended way to include it as a literal character.

Conclusion​

The "Range out of order" error in JavaScript regular expressions is almost always caused by a hyphen (-) being placed in an ambiguous position within a character set ([...]).

  • To fix the error and include a literal hyphen, place the hyphen at the very beginning or very end of the character set. For example, [-abc] or [abc-]. This is the recommended best practice.
  • Alternatively, you can escape the hyphen with a backslash (e.g., [a\-b]), but this is often less readable.

By following this simple rule, you can avoid this common regex syntax error and reliably include hyphens in your character classes.

Table of Contents