Regular Expressions 101

Pro

Group 1(import\s*{\s*)

importthe literal text import (case sensitive)

\s*any whitespace character, repeated any number of times

{the literal { (123₁₀ / 173₈ / 7B₁₆)

\s*any whitespace character, repeated any number of times

Group 2(\w+)

\w+any word character, repeated at least once

\s*any whitespace character, repeated any number of times

,the literal , (44₁₀ / 54₈ / 2C₁₆)

Group 3([\w\s,*]+?)

Character Class[\w\s,*]+?

+?matches at least one character from the set below:

\wany word character

\sany whitespace character

,the literal , (44₁₀ / 54₈ / 2C₁₆)

*the literal * (42₁₀ / 52₈ / 2A₁₆)

Group 4(\s*}(?:\s*from)?\s*)

\s*any whitespace character, repeated any number of times

}the literal } (125₁₀ / 175₈ / 7D₁₆)

Non-Capturing Group(?:\s*from)?

?repeats the group contents below at most once:

\s*any whitespace character, repeated any number of times

fromthe literal text from (case sensitive)

\s*any whitespace character, repeated any number of times

Group 5(["'])?

?repeats the group contents below at most once:

Character Class["']

"the literal " (34₁₀ / 42₈ / 22₁₆)

'the literal ' (39₁₀ / 47₈ / 27₁₆)

Group 6([@\w\s\\/.-]*?)

Character Class[@\w\s\\/.-]*?

*?matches any number of characters from the set below:

@the literal @ (64₁₀ / 100₈ / 40₁₆)

\wany word character

\sany whitespace character

\\the literal \ (92₁₀ / 134₈ / 5C₁₆)

/the literal / (47₁₀ / 57₈ / 2F₁₆)

.the literal . (46₁₀ / 56₈ / 2E₁₆)

-the literal - (45₁₀ / 55₈ / 2D₁₆)

\5the text saved by group 5

Global pattern flags

g modifier: global. Finds all matches instead of stopping after the first

m modifier: multiline. Causes ^ and $ to match the start and end of each line, not only the start and end of the string

Detailed match information will be displayed here automatically.

25 tokens

Regular Expression

(import\s*{\s*)(\w+)\s*,([\w\s,*]+?)(\s*}(?:\s*from)?\s*)(["'])?([@\w\s\\/.-]*?)\5

New

import { Grid, Heading, Button } from 'component-library'
import { Heading, Button } from 'component-library'
import { Button } from 'component-library'

Substitution

$1$2$4$5$6$5\n$1$3$4$5$6$5

import { Grid, Heading, Button } from 'component-library'
import { Heading, Button } from 'component-library'
import { Button } from 'component-library'