Get updates

Scott Introduction to Regular Expressions in JavaScript: Alternation and Grouping

Regular expressions provide lots of flexibility in processing text, and this article introduces two additional metacharacters (three counting both parentheses), but first I’ll start with a summary of what was covered in the previous regex article:

  • Regular expressions match a pattern to the occurrence of that pattern within a string.
  • Options covered (thus far) for regular expressions include i and g, which cause matching to be case-insensitive and global respectively (global matches each occurrence of the pattern within the string, instead of only the first).
  • The caret (^) is a special metacharacter which matches “the beginning of a string”, just before the first character of the string.
  • The dollar sign ($) is a similar metacharacter which matches “the end of a string”; if a line ends with a newline or carriage return character, the dollar sign matches just before that character.
  • Regular expression matches and replacements go hand in hand, similar to common find-and-replace at the basic level but promising far greater power once you master the more advanced features.

Alternation

There are times when you may want to match either of two patterns against a string. The pipe (|) is a metacharacter which means “or” when it is included in a regex. The pattern in the following example will match on script or compiled:

var text = 'JavaScript';
var pattern = /script|compiled/i;
alert(text.match(pattern)); //-> Script

Alternation can be taken further, you’re not limited to alternating only between two different parts of a pattern. Simply chain together multiple pieces of a pattern you want to alternate by separating each with a pipe.

var text = 'Tuesdays are a great time for Mexican food and horror movies';
var pattern = /Mon|Tue|Wed|Thu|Fri|Sat|Sun/;
alert(text.match(pattern)); //-> Tue

Grouping

It is possible to construct more complex alternation patterns by grouping pieces of the pattern using parentheses (). Just like most other types of expressions, a regex allows characters to be grouped by parentheses. This means that alternation can be restricted to pieces of a group, while some additional common characters can be placed outside the group to match alongside every piece alternating inside the parentheses.

var text = 'Thursdays are a great time for Buffy on DVD and sushi delivered';
var pattern = /(Mon|Tues|Wednes|Thurs|Fri|Satur|Sun)day/;
alert(text.match(pattern)); //-> Thursday

Here the beginnings of the names of the days are alternating with pipes, and these are all grouped inside parentheses, followed immediately by ‘day’. As soon as one of the alternating pieces match the string that fills the requirement of the group. For the entire pattern to match, the immediate next text must match ‘day’ as it follows the parentheses.

Grouping also has another effect of “remembering” subexpression matches, about which I’ll go into more detail another time.

Tune in next time for more on the power of regular expressions!

2 Responses to “Introduction to Regular Expressions in JavaScript: Alternation and Grouping”

  1. authentic air jordans

    Introduction to Regular Expressions in JavaScript: Alternation and Grouping – Development – 3DM Design

  2. air jordan retro 9 release date

    Introduction to Regular Expressions in JavaScript: Alternation and Grouping – Development – 3DM Design

Leave a Reply


Fatal error: Uncaught Error: Call to undefined function show_subscription_checkbox() in /home/dmetro/3dmdesign.com/wp-content/themes/hex_columns/comments.php:90 Stack trace: #0 /home/dmetro/3dmdesign.com/wp-includes/comment-template.php(1472): require() #1 /home/dmetro/3dmdesign.com/wp-content/themes/hex_columns/single.php(65): comments_template() #2 /home/dmetro/3dmdesign.com/wp-includes/template-loader.php(74): include('/home/dmetro/3d...') #3 /home/dmetro/3dmdesign.com/wp-blog-header.php(19): require_once('/home/dmetro/3d...') #4 /home/dmetro/3dmdesign.com/index.php(17): require('/home/dmetro/3d...') #5 {main} thrown in /home/dmetro/3dmdesign.com/wp-content/themes/hex_columns/comments.php on line 90