Lesson guide

Learning objectives

  • Explain the main purpose of Alternation (OR) | in JavaScript.
  • Identify the syntax, APIs, or concepts introduced in this lesson.
  • Use the examples to predict how JavaScript will behave before you run similar code.
  • Connect this topic to nearby lessons in Regular expressions.

Real-world context

This lesson matters when you need to recognize where Alternation (OR) | fits into real JavaScript programs. Alternation is the term in regular expression that is actually a simple “OR”.

Key ideas

  • Alternation (OR) | is part of the Regular expressions chapter, so it builds on the surrounding concepts rather than standing alone.
  • Read each code example in two passes: first for the result, then for the rule that explains the result.
  • When a section compares similar features, focus on the condition that makes you choose one feature over another.

Key terms

  • Alternation (OR) |
  • Alternation
  • Regular expressions
  • JavaScript

Alternation is the term in regular expression that is actually a simple “OR”.

In a regular expression it is denoted with a vertical line character |.

For instance, we need to find programming languages: HTML, PHP, Java or JavaScript.

The corresponding regexp: html|php|java(script)?.

A usage example:

javascript
let regexp = /html|php|css|java(script)?/gi;

let str = "First HTML appeared, then CSS, then JavaScript";

alert( str.match(regexp) );

We already saw a similar thing – square brackets. They allow to choose between multiple characters, for instance gr[ae]y matches gray or grey.

Square brackets allow only characters or character classes. Alternation allows any expressions. A regexp A|B|C means one of expressions A, B or C.

For instance:

  • gr(a|e)y means exactly the same as gr[ae]y.
  • gra|ey means gra or ey.

To apply alternation to a chosen part of the pattern, we can enclose it in parentheses:

  • I love HTML|CSS matches I love HTML or CSS.
  • I love (HTML|CSS) matches I love HTML or I love CSS.

Example: regexp for time

In previous articles there was a task to build a regexp for searching time in the form hh:mm, for instance 12:00. But a simple \d\d:\d\d is too vague. It accepts 25:99 as the time (as 99 minutes match the pattern, but that time is invalid).

How can we make a better pattern?

We can use more careful matching. First, the hours:

  • If the first digit is 0 or 1, then the next digit can be any: [01]\d.
  • Otherwise, if the first digit is 2, then the next must be [0-3].
  • (no other first digit is allowed)

We can write both variants in a regexp using alternation: [01]\d|2[0-3].

Next, minutes must be from 00 to 59. In the regular expression language that can be written as [0-5]\d: the first digit 0-5, and then any digit.

If we glue hours and minutes together, we get the pattern: [01]\d|2[0-3]:[0-5]\d.

We’re almost done, but there’s a problem. The alternation | now happens to be between [01]\d and 2[0-3]:[0-5]\d.

That is: minutes are added to the second alternation variant, here’s a clear picture:

none
[01]\d  |  2[0-3]:[0-5]\d

That pattern looks for [01]\d or 2[0-3]:[0-5]\d.

But that’s wrong, the alternation should only be used in the “hours” part of the regular expression, to allow [01]\d OR 2[0-3]. Let’s correct that by enclosing “hours” into parentheses: ([01]\d|2[0-3]):[0-5]\d.

The final solution:

javascript
let regexp = /([01]\d|2[0-3]):[0-5]\d/g;

alert("00:00 10:10 23:59 25:99 1:2".match(regexp)); // 00:00,10:10,23:59

Common mistakes

  • Skipping the small examples and then missing the exact rule that Alternation (OR) | depends on.
  • Copying code without changing one value at a time to see which part controls the result.
  • Treating similar-looking syntax or APIs as interchangeable before checking their edge cases.

Summary

  • Alternation (OR) | gives you one more piece of the JavaScript mental model.
  • The examples in this lesson are the quickest way to check whether the rule is clear.
  • Revisit the key terms when you meet the same idea in later chapters.

Predict

Before running this alternation block, predict the five output lines. It shows alternation between whole expressions, grouping alternation to limit its scope, and using alternation to build a stricter hh:mm time pattern.

javascript
Reveal explanation

| separates whole alternatives, so html|php|css|java(script)? can match several different language names. gr(a|e)y limits the choice to one letter position. Without grouping, I love HTML|CSS means I love HTML or plain CSS; with grouping, the shared prefix applies to both alternatives. The time pattern groups only the hour alternatives before adding the shared minute pattern.

Try it

Remove the parentheses around ([01]\d|2[0-3]), then predict what happens to 10:10. Then change java(script)? to java|javascript and explain which alternative is tried first.

Practice

  • Rewrite one example from this lesson without looking at the original, then run it and compare the result.
  • Change one input, operator, method call, or option in a code sample and predict what will happen before running it.
  • Explain Alternation (OR) | in your own words as if you were reviewing it with another learner.

Keep learning

Continue with Lookahead and lookbehind when you are ready for the next lesson.