regex101: PCRE (Legacy) Match Workspace

<Buttonthe literal text <Button (case sensitive)

Non-Capturing Group(?:\w+=\{[^{}]*\}|[^>])*

*repeats the group contents below any number of times:

1st Alternative\w+=\{[^{}]*\}

\w+any word character, repeated at least once

=the literal = (61₁₀ / 75₈ / 3D₁₆)

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

Negated Character Class[^{}]*

*matches any number of characters outside the set below:

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

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

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

2nd Alternative[^>]

Negated Character Class[^>]

>the literal > (62₁₀ / 76₈ / 3E₁₆)

\sany whitespace character

className=the literal text className= (case sensitive)

Non-Capturing Group(?:\w+=\{[^{}]*\}|[^>])*

*repeats the group contents below any number of times:

1st Alternative\w+=\{[^{}]*\}

\w+any word character, repeated at least once

=the literal = (61₁₀ / 75₈ / 3D₁₆)

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

Negated Character Class[^{}]*

*matches any number of characters outside the set below:

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

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

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

2nd Alternative[^>]

Negated Character Class[^>]

>the literal > (62₁₀ / 76₈ / 3E₁₆)

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

Search reference

Regular Expression

<Button(?:\w+=\{[^{}]*\}|[^>])*\sclassName=(?:\w+=\{[^{}]*\}|[^>])*>

New

<Button className={style.red} />

<Button className={style.red}> </Button>

<Button
	palette="primary" 
	className={style.blue} 
/>

<Button
	palette="primary"
/>

<Button
	palette="primary" 
	className={style.blue} 
>
</Button>

<Button
	palette="primary" 
	condition={ value => 5 ? props1 : props2 }
	className={style.blue} 
/>

<Button
	palette="primary" 
	condition={ value <= 5 ? props1 : props2 }
	className={style.blue} 
/>

<Button
	palette="primary" 
	className={style.blue} 
	condition={ value => 5 ? props1 : props2 }
/>

Regular Expressions 101

Regular Expression

Substitution