# Make regular expressions easier to read

DevFeed: [Make regular expressions easier to read](<https://devfeed.tech/articles/make-regular-expressions-easier-to-read-37309.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/make-regular-expressions-easier-to-read/>)

Author: Stanko

Published: 2025-03-31T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Code](<https://devfeed.tech/topics/code.md>), [formatting](<https://devfeed.tech/topics/formatting.md>), [Maintainability](<https://devfeed.tech/topics/maintainability.md>)

Tags: [example](<https://devfeed.tech/tags/example.md>), [extra](<https://devfeed.tech/tags/extra.md>), [join](<https://devfeed.tech/tags/join.md>), [maintainability](<https://devfeed.tech/tags/maintainability.md>), [readability](<https://devfeed.tech/tags/readability.md>), [regular-expressions](<https://devfeed.tech/tags/regular-expressions.md>), [value](<https://devfeed.tech/tags/value.md>)

## AI overview

The article presents a formatting technique for making complex regular expressions easier to read: split the expression into multiple string components, join them, and construct the final regex. The approach adds code and requires escaping backslashes, but enables scanning and comments that can improve readability and maintainability.

## Source excerpt

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.