Published at
Updated at
Reading time
2min
This post is part of my Today I learned series in which I share all my web development learnings.

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
chromechrome_androidedgefirefoxfirefox_androidsafarisafari_iossamsunginternet_androidwebview_android
111211111.51

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.

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 1 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.