JavaScript Alternation (OR) in Regular Expressions

In JavaScript regular expressions, alternation allows you to match one of several possible patterns. The alternation operator, represented by the pipe symbol |, works like a logical "OR" between the different patterns.

When you use alternation, the regular expression engine tries to match any of the given alternatives, and if one of them matches, it will stop and return the result.

1. Syntax of Alternation

The basic syntax of alternation is:

pattern1|pattern2

pattern1 is the first option to match.
pattern2 is the second option to match.
The regular expression will match either pattern1 or pattern2.

2. Example: Basic Alternation

let pattern = /apple|banana/;
let str1 = "apple pie";
let str2 = "banana bread";

console.log(pattern.test(str1)); // true
console.log(pattern.test(str2)); // true

Explanation:

The regular expression /apple|banana/ will match either the word "apple" or the word "banana".
The string "apple pie" contains the word "apple", so it matches.
The string "banana bread" contains the word "banana", so it matches as well.

3. Alternation with More Options

You can include more alternatives in the regular expression by simply adding more options separated by the pipe symbol |.

Example: Multiple Alternatives

let pattern = /cat|dog|fish/;
let str1 = "I have a cat";
let str2 = "I have a dog";
let str3 = "I have a fish";
let str4 = "I have a bird";

console.log(pattern.test(str1)); // true
console.log(pattern.test(str2)); // true
console.log(pattern.test(str3)); // true
console.log(pattern.test(str4)); // false

Explanation:

The regular expression /cat|dog|fish/ will match any of the three words: "cat", "dog", or "fish".
The string "I have a cat" matches "cat", so it returns true.
The string "I have a dog" matches "dog", so it returns true.
The string "I have a fish" matches "fish", so it returns true.
The string "I have a bird" does not match any of the alternatives, so it returns false.

4. Grouping Alternatives with Parentheses

If you want to apply alternation to more complex patterns, you can group parts of the pattern using parentheses ().

Example: Grouping Alternatives

let pattern = /(cat|dog)s?/;
let str1 = "cat";
let str2 = "dog";
let str3 = "cats";
let str4 = "dogs";
let str5 = "rabbit";

console.log(pattern.test(str1)); // true
console.log(pattern.test(str2)); // true
console.log(pattern.test(str3)); // true
console.log(pattern.test(str4)); // true
console.log(pattern.test(str5)); // false

Explanation:

The regular expression /(cat|dog)s?/ has a grouped alternation (cat|dog) followed by s?, which means "zero or one occurrence of s."
This will match "cat", "dog", "cats", or "dogs", but not "rabbit".
The group (cat|dog) allows for either "cat" or "dog" to be matched, and the s? allows for the optional s at the end.

5. Nested Alternation

Alternation can be used within groups and can be nested to handle more complex scenarios.

Example: Nested Alternation

let pattern = /(apple|orange|banana) juice|water/;
let str1 = "apple juice";
let str2 = "banana juice";
let str3 = "orange water";
let str4 = "grape juice";

console.log(pattern.test(str1)); // true
console.log(pattern.test(str2)); // true
console.log(pattern.test(str3)); // true
console.log(pattern.test(str4)); // false

Explanation:

The regular expression /(apple|orange|banana) juice|water/ has a group for three types of juices: "apple juice", "orange juice", or "banana juice".
Alternatively, it can match "water".
The string "apple juice", "banana juice", and "orange water" match, but "grape juice" does not because "grape" is not part of the alternation.

6. Alternation with Anchors

You can combine alternation with anchors (^ for the start of string and $ for end of string) to ensure that the match occurs at the beginning or end of a string.

Example: Alternation with Anchors

let pattern = /^(apple|banana)$/;
let str1 = "apple";
let str2 = "banana";
let str3 = "apple pie";
let str4 = "orange";

console.log(pattern.test(str1)); // true
console.log(pattern.test(str2)); // true
console.log(pattern.test(str3)); // false
console.log(pattern.test(str4)); // false

Explanation:

The regular expression ^(apple|banana)$ matches either "apple" or "banana" at the start and end of the string.
The string "apple" matches, "banana" matches, but "apple pie" and "orange" do not, as they do not exactly match either "apple" or "banana".

7. Conclusion

The alternation operator (|) is a powerful feature in JavaScript regular expressions that allows you to match different options in a single pattern. It works like an "OR" operator and is especially useful for matching multiple possible substrings, patterns, or complex conditions.

Basic alternation: /cat|dog/ matches either "cat" or "dog".
Grouping with alternation: /(cat|dog)s?/ matches "cat", "dog", "cats", or "dogs".
Nested alternation: /(apple|orange|banana) juice|water/ matches "apple juice", "orange juice", "banana juice", or "water".

By combining alternation with other regular expression features, you can build more complex and powerful matching patterns.

Souy Soeng

JavaScript Alternation (OR) in Regular Expressions