Make regular expressions easier to read

This is a simple formatting trick I use to make regular expressions more readable. The secret? Break them into multiple lines.

To achieve this, format the regex as an array of strings and then concatenate the array into a single regex string.

Example #

Compare this example, written in a single line:

const FILTER_REGEXP =
  /(?<name>blur|brightness|contrast|grayscale|hue-rotate|invert|opacity|saturate|sepia)\((?<value>-?\d*(?:\.\d*)?)(?<unit>\w*?)\)/g;

with the multi-line version:

const SUPPORTED_FILTERS = [
  'blur',
  'brightness',
  'contrast',
  'grayscale',
  'hue-rotate',
  'invert',
  'opacity',
  'saturate',
  'sepia',
].join('|');

const FILTER_REGEXP = new RegExp(
  [
    `(?<name>${SUPPORTED_FILTERS})`, // filter name
    `\\(`,
    `(?<value>\-?\\d*(?:\\.\\d*)?)`, // value
    `(?<unit>\\w*?)`, // unit if any
    `\\)`,
  ].join(''),
  'g'
);

The multi-line version has a bit more code, but it's easier to scan and read. It also allows us to write comments for each section, clarifying the purpose of each part of the regex. I've found that complex expressions are much easier to write this way. I believe it greatly reduces the cognitive load for both the writer and the reader.

Caveats #

You'll need to escape the backslashes in regex strings. While this is a minor inconvenience, the readability benefits easily outweigh it.

Conclusion #

It boils down to personal preference, but I believe the extra code is worth it, as it improves readability and maintainability. This is especially true when dealing with notoriously difficult-to-parse complex regular expressions.