w3docs logo

JavaScript Regex (OR)

  1. Understanding the OR Operator (|) in RegEx
  2. Practical Examples
  3. Combining the OR Operator with Other Metacharacters
  4. Conclusion
  5. Practice Your Knowledge new
  6. Related Resources

JavaScript regular expressions (RegEx) offer powerful capabilities for pattern matching within strings. One of the key components of RegEx is the OR operator, represented by the vertical bar (|). This operator allows for the inclusion of multiple patterns within a single regular expression, enabling versatile and efficient string searches and manipulations. In this comprehensive guide, we will explore the usage of the OR operator in JavaScript RegEx, complete with practical examples to enhance your understanding.

Understanding the OR Operator (|) in RegEx

The OR operator in regular expressions allows you to specify multiple alternatives for a match. It is particularly useful when you need to match one pattern out of several possible patterns.

Basic Usage of the OR Operator

The syntax for the OR operator is straightforward. It involves placing the | symbol between the patterns you want to match.

const pattern = /cat|dog/; const string1 = "I have a cat"; const string2 = "I have a dog"; const string3 = "I have a frog"; console.log(pattern.test(string1)); // Output: true console.log(pattern.test(string2)); // Output: true console.log(pattern.test(string3)); // Output: false

In this example, the pattern /cat|dog/ matches both "cat" and "dog" in the given strings.

Grouping with Parentheses

Parentheses () are used to group parts of a regular expression (For more information about groups, see Capturing Groups). This is useful when you need to apply the OR operator to multiple characters or patterns.

let pattern = /(cat|dog)s?/; let string1 = "I have a cat"; let string2 = "I have two dogs"; console.log(pattern.test(string1)); // Output: true console.log(pattern.test(string2)); // Output: true

Here, the pattern /(cat|dog)s?/ matches "cat", "cats", "dog", and "dogs".

Practical Examples

Matching Different File Extensions

Suppose you need to validate file names with different extensions such as .jpg, .png, or .gif.

let pattern = /\.(jpg|png|gif)$/; let file1 = "image.jpg"; let file2 = "image.png"; let file3 = "image.gif"; let file4 = "image.txt"; console.log(pattern.test(file1)); // Output: true console.log(pattern.test(file2)); // Output: true console.log(pattern.test(file3)); // Output: true console.log(pattern.test(file4)); // Output: false

In this example, the pattern /\.(jpg|png|gif)$/ matches file names ending with ".jpg", ".png", or ".gif".

Validating Phone Numbers

Consider a scenario where you need to validate different formats of phone numbers.

let pattern = /(\+\d{1,2}\s?)?(\(\d{3}\)|\d{3})[-.\s]?\d{3}[-.\s]?\d{4}/; let phone1 = "+1 123-456-7890"; let phone2 = "(123) 456-7890"; let phone3 = "123.456.7890"; let phone4 = "1234567890"; console.log(pattern.test(phone1)); // Output: true console.log(pattern.test(phone2)); // Output: true console.log(pattern.test(phone3)); // Output: true console.log(pattern.test(phone4)); // Output: true

The pattern /(\+\d{1,2}\s?)?(\(\d{3}\)|\d{3})[-.\s]?\d{3}[-.\s]?\d{4}/ matches various phone number formats, including those with country codes, parentheses, hyphens, dots, and spaces.

Matching Optional Subpatterns

The OR operator can also be used to match optional subpatterns within a string.

let pattern = /color|colour/; let string1 = "The color of the car is red."; let string2 = "The colour of the car is red."; console.log(pattern.test(string1)); // Output: true console.log(pattern.test(string2)); // Output: true

Here, the pattern /color|colour/ matches both American and British spellings of the word "color".

Combining the OR Operator with Other Metacharacters

The power of the OR operator is enhanced when combined with other regular expression metacharacters, such as * (zero or more), + (one or more), ? (zero or one), and {} (exactly n times).

Example with Quantifiers

let pattern = /\b(cat|dog)s?\b/; let string1 = "I have a cat."; let string2 = "I have two dogs."; let string3 = "I have a dogscat."; console.log(pattern.test(string1)); // Output: true console.log(pattern.test(string2)); // Output: true console.log(pattern.test(string3)); // Output: false

The pattern /\b(cat|dog)s?\b/ matches "cat", "cats", "dog", and "dogs" as whole words, using the word boundary metacharacter \b.

Advanced Example with Multiple Conditions

let pattern = /(\d{1,2}-\d{1,2}-\d{4})|(\d{4}-\d{1,2}-\d{1,2})/; let date1 = "12-31-2023"; let date2 = "2023-12-31"; let date3 = "31-12-2023"; console.log(pattern.test(date1)); // Output: true console.log(pattern.test(date2)); // Output: true console.log(pattern.test(date3)); // Output: false

In this example, the pattern /(\d{1,2}-\d{1,2}-\d{4})|(\d{4}-\d{1,2}-\d{1,2})/ matches dates in both "MM-DD-YYYY" and "YYYY-MM-DD" formats.

Conclusion

Mastering the OR operator in JavaScript regular expressions opens up a wide range of possibilities for efficient and versatile pattern matching. By understanding how to use the OR operator in combination with other RegEx features, you can create powerful and flexible patterns to handle complex string searches and manipulations.

Practice Your Knowledge

Which of the following regular expressions correctly use the OR operator (|) to search for the words 'cat' or 'dog'?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?