Home

Awesome

babel-plugin-transform-regex

npm version

This is a Babel plugin that transpiles tagged Regex+ regex templates into native RegExp literals, enabling syntax for modern and more readable regex features (atomic groups, subroutines, insignificant whitespace, comments, etc.) without the need for calling regex at runtime. Although Regex+ is already a lightweight and high-performance library, this takes things further by giving you its developer experience benefits without adding any runtime dependencies and without users paying any runtime cost.

Try the demo REPL

Example

Input:

const ipv4 = regex`
  ^ \g<byte> (\.\g<byte>){3} $

  (?(DEFINE)
    (?<byte> 2[0-4]\d | 25[0-5] | 1\d\d | [1-9]?\d)
  )
`;

Output:

const ipv4 = /^(?:2[0-4]\d|25[0-5]|1\d\d|[1-9]?\d)(?:\.(?:2[0-4]\d|25[0-5]|1\d\d|[1-9]?\d)){3}$/v;

Supported

The following call formats are all supported:

Interpolation into the expression is supported, so long as the interpolated values are:

Additional details:

Unsupported

Babel plugin options

The following options are available when running the Babel plugin:

Compatibility

By default, the regex tag implicitly adds flag <kbd>v</kbd> (unicodeSets, supported by Node.js 20 and 2023-era browsers) to generated regexes, but it automatically switches to flag <kbd>u</kbd> (while applying <kbd>v</kbd>'s escaping rules) in environments without native <kbd>v</kbd> support. This creates an issue for the Babel plugin, because although it will typically be run in environments that support flag <kbd>v</kbd>, the transpiled results may need to run for users in old browsers without native <kbd>v</kbd>.

There are several ways to address this:

You can try all of these options in the demo REPL.

Installation and usage

Add this plugin and a recent version of Babel (tested with 7.24–7.26) to your project:

npm install --save-dev @babel/core @babel/cli
npm install --save-dev babel-plugin-transform-regex

Run the following command to compile all of your code from the src directory to lib:

./node_modules/.bin/babel src --out-dir lib --plugins=babel-plugin-transform-regex

Optional setup steps

To make this easier to run, create a config file in the root of your project named babel.config.json, with this content:

{
  "plugins": ["babel-plugin-transform-regex"]
}

Or to set plugin options:

{
  "plugins": [["babel-plugin-transform-regex", {"removeImport": true}]]
}

If you're using TypeScript, also add @babel/plugin-syntax-typescript.

Then add a script to your package.json to run the build:

"scripts": {
  "build": "babel src --out-dir lib"
}

After that, you can run it via npm run build.

<!-- Badges -->