JavaScript RegExp (x|y) Alternation

What You’ll Learn

Alternation (x|y) lets a regular expression match either sub-pattern x or sub-pattern y. It is the regex “OR” operator—essential for validating file types, parsing keywords, normalizing URLs, and building flexible search rules.

Introduction

Character classes like [abc] choose among single characters. Alternation goes further: you can match whole words, prefixes, or multi-character sequences with one pattern.

The pipe character | inside a group means “try this branch, or try that branch.” Wrap alternatives in parentheses so the OR applies to complete patterns, not just the character beside the pipe.

Understanding (x|y) Alternation

In (x|y), the engine evaluates the left alternative first. If it matches at the current position, that branch wins. Otherwise it backtracks and tries the right alternative.

/(cat|dog)/.test("I have a dog");  // true
/(cat|dog)/.test("catalog");       // true ("cat" matches start)
/(cat|dog)/.test("fish");          // false

/(http|https)/.test("https://example.com"); // true

Each side of the pipe can be any valid regex fragment—literal text, character classes, quantifiers, or even nested groups.

How to Use (x|y) in JavaScript

Alternation appears in detection, extraction, replacement, and validation workflows:

const pet = /(cat|dog)/;
console.log(pet.test("My dog runs"));        // true

const colors = "red green blue".match(/(red|green|blue)/g);
console.log(colors); // ["red", "green", "blue"]

const url = "http://site.com".replace(/https?/, "https");
console.log(url); // "https://site.com"

const ext = /\.(jpg|png|gif)$/i.test("photo.PNG"); // true

Use test() for yes/no checks, match() to collect which alternative appeared, and replace() to normalize one branch to another.

📝 Syntax

/(x|y)/              // match x or y
/(cat|dog)/          // whole-word alternatives
/(red|green|blue)/   // three or more branches
/(?:x|y)/            // non-capturing group
/\.(jpg|jpeg|png)$/  // file extension check

Common patterns

• /(cat|dog)/ — match the word “cat” or “dog”.
• /(https|http)/ — match either protocol prefix.
• /\.(jpg|png|gif)$/i — validate image extensions at end of string.
• /(Mr\.|Mrs\.|Ms\.|Dr\.)/ — match common name titles.

Examples Gallery

Open DevTools Console (F12) or use Try-it links. Examples cover pets, colors, URL normalization, file extensions, and title prefixes.

const pet = /(cat|dog)/;

console.log(pet.test("I have a dog"));  // true
console.log(pet.test("catalog"));       // true ("cat" matches)
console.log(pet.test("I love fish"));   // false

true
true
false

const sentence = "The red door and green grass look blue today.";

const colors = sentence.match(/(red|green|blue)/g);
console.log(colors); // ["red", "green", "blue"]

const first = sentence.match(/(red|green|blue)/);
console.log(first[0]); // "red"

["red", "green", "blue"]
red

const links = [
  "http://example.com",
  "https://secure.com",
  "ftp://files.com"
];

const normalized = links.map(function (link) {
  return link.replace(/^(http|https):\/\//, "https://");
});

console.log(normalized);
// ["https://example.com", "https://secure.com", "ftp://files.com"]

["https://example.com", "https://secure.com", "ftp://files.com"]

const imageExt = /\.(jpg|jpeg|png|gif|webp)$/i;

console.log(imageExt.test("photo.PNG"));   // true
console.log(imageExt.test("doc.pdf"));    // false
console.log(imageExt.test("banner.jpeg")); // true

true
false
true

const titlePattern = /(Mr\.|Mrs\.|Ms\.|Dr\.)\s+[A-Z][a-z]+/g;
const text = "Mr. Smith and Dr. Lee met Mrs. Jones.";

const titles = text.match(titlePattern);
console.log(titles); // ["Mr. Smith", "Dr. Lee", "Mrs. Jones"]

const captured = text.match(/(Mr\.|Mrs\.|Ms\.|Dr\.)/);
console.log(captured[1]); // "Mr."

["Mr. Smith", "Dr. Lee", "Mrs. Jones"]
Mr.

🚀 Common Use Cases

• Keyword detection — match any of several trigger words in user input.
• File type validation — allow uploads only for approved extensions.
• URL normalization — rewrite http and https consistently.
• Date/time formats — accept AM or PM, Jan or January.
• Routing rules — match path segments like (admin|dashboard).
• Search filters — highlight any synonym from a pipe-separated list.

Important Considerations

• Order matters — put longer or more specific alternatives first: (javascript|java) not (java|javascript).
• Partial matches — (cat|dog) matches "catalog" because cat is a prefix; use word boundaries \b(cat|dog)\b when needed.
• Precedence — alternation has low precedence; group with parentheses so only the intended part is optional.
• Capturing groups — (x|y) creates group 1; use (?:x|y) when you do not need the capture.
• Not the same as [xy] — character classes match one character; alternation matches full sub-patterns.

📝 Notes

• (x|y) is alternation; [xy] is a single-character class.
• Chain many options: (a|b|c|d) with no limit on branch count.
• Review [abc] for character classes and [^abc] for negated sets.
• Next up: ignoreCase for case-insensitive matching with the i flag.
• Use \b word boundaries when whole-word matching matters.
• Prefer (?:...) when grouping for precedence without polluting capture group numbers.

💡 Best Practices