Multiline mode in JavaScript regular expressions

Today I learned that JavaScript regular expressions support a multiline flag (m). And suprisingly, it's nothing new or shiny... The regular expression feature is supported for years!

MDN Compat Data (source)

Browser support info for RegExp multiline

1	1	12	1	1	1	1	1.5	1

Let's look at an example that includes the caret (^) anchor to learn how multiline regular expressions work.

const winners = `1st place: Winnie
2nd place: Piglet
3rd place: Eeyore`;

// Match strings that:
//   - start with a digit (^\d)
//   - are followed by any sequence of characters (.+?)
//   - include a colon (:)
//   - and test for all possible matches (g)
winners.match(/^\d.+?:/g); 
// -> ["1st:"]

The regular expression /^\d.+?:/ matches only 1st:. ^ indicates that you want to match a pattern at the beginning of a string. There's only one string beginning; so there can only be one match. That's reasonable. 😉

But what if you want to match 1st:, 2nd: and 3rd:?

This situation is when multiline helps.

const winners = `1st place: Jane
2nd place: Joe
3rd place: Stefan`;

// Match strings that:
//   - start lines with a digit (^\d)
//   - are followed by any sequence of characters (.+?)
//   - include a colon (:)
//   - consider multiple lines (m)
//   - and test for all possible matches (g) 
winners.match(/^\d.+?:/gm);
// -> ["1st:", "2nd:", "3rd:"]

The m flag changes the meaning of ^ from "start of a string" to "start of a new line". And similarly, the end of a string ($) becomes the end of a line when being used in multiline mode.

const winners = `1st place
2nd place
3rd place`;

// Match strings that:
//   - include a digit (\d)
//   - are followed by any sequence of characters (.+?)
//   - to the end of the string ($)
//   - and test for all possible matches (g)
winners.match(/\d.+?$/g);
// -> [ "3rd place" ]

// Match strings that:
//   - include a digit (\d)
//   - are followed by any sequence of characters (.+?)
//   - to the end of the line ($)
//   - and test for all possible matches (g) 
winners.match(/\d.+?$/gm); 
// -> [ "1st place", "2nd place", "3rd place" ]

But what's counted as line break in a multiline regular expression? multiline considers \n (line feed), \r (carriage return) and other line breaks such as \u2028 (line separator) and \u2029 (paragraph separator).

That's pretty cool stuff! If you want to learn more, here's the MDN page for multiline.