regex101: JavaScript Match Workspace

^start of line

hslthe literal text hsl (case insensitive)

a?optionally matches the literal a (97₁₀ / 141₈ / 61₁₆) (case insensitive)

\(the literal ( (40₁₀ / 50₈ / 28₁₆)

Non-Capturing Group(?:(-?\d+(?:deg|g?rad|turn)?),\s*((?:\d{1,2}|100)%),\s*((?:\d{1,2}|100)%)(?:,\s*((?:\d{1,2}|100)%|0(?:\.\d+)?|1))?|(-?\d+(?:deg|g?rad|turn)?)\s+((?:\d{1,2}|100)%)\s+((?:\d{1,2}|100)%)(?:\s+((?:\d{1,2}|100)%|0(?:\.\d+)?|1))?)

1st Alternative(-?\d+(?:deg|g?rad|turn)?),\s*((?:\d{1,2}|100)%),\s*((?:\d{1,2}|100)%)(?:,\s*((?:\d{1,2}|100)%|0(?:\.\d+)?|1))?

Group 1(-?\d+(?:deg|g?rad|turn)?)

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

\d+a digit, repeated at least once

Non-Capturing Group(?:deg|g?rad|turn)?

?repeats the group contents below at most once:

1st Alternativedeg

degthe literal text deg (case insensitive)

2nd Alternativeg?rad

g?optionally matches the literal g (103₁₀ / 147₈ / 67₁₆) (case insensitive)

radthe literal text rad (case insensitive)

3rd Alternativeturn

turnthe literal text turn (case insensitive)

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

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

Group 2((?:\d{1,2}|100)%)

Non-Capturing Group(?:\d{1,2}|100)

1st Alternative\d{1,2}

\d{1,2}a digit, repeated between 1 and 2 times

2nd Alternative100

100the literal text 100

%the literal % (37₁₀ / 45₈ / 25₁₆)

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

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

Group 3((?:\d{1,2}|100)%)

Non-Capturing Group(?:\d{1,2}|100)

1st Alternative\d{1,2}

\d{1,2}a digit, repeated between 1 and 2 times

2nd Alternative100

100the literal text 100

%the literal % (37₁₀ / 45₈ / 25₁₆)

Non-Capturing Group(?:,\s*((?:\d{1,2}|100)%|0(?:\.\d+)?|1))?

?repeats the group contents below at most once:

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

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

Group 4((?:\d{1,2}|100)%|0(?:\.\d+)?|1)

1st Alternative(?:\d{1,2}|100)%

Non-Capturing Group(?:\d{1,2}|100)

1st Alternative\d{1,2}

\d{1,2}a digit, repeated between 1 and 2 times

2nd Alternative100

100the literal text 100

%the literal % (37₁₀ / 45₈ / 25₁₆)

2nd Alternative0(?:\.\d+)?

0the literal 0 (48₁₀ / 60₈ / 30₁₆)

Non-Capturing Group(?:\.\d+)?

?repeats the group contents below at most once:

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

\d+a digit, repeated at least once

3rd Alternative1

1the literal 1 (49₁₀ / 61₈ / 31₁₆)

2nd Alternative(-?\d+(?:deg|g?rad|turn)?)\s+((?:\d{1,2}|100)%)\s+((?:\d{1,2}|100)%)(?:\s+((?:\d{1,2}|100)%|0(?:\.\d+)?|1))?

Group 5(-?\d+(?:deg|g?rad|turn)?)

\s+any whitespace character, repeated at least once

Group 6((?:\d{1,2}|100)%)

\s+any whitespace character, repeated at least once

Group 7((?:\d{1,2}|100)%)

Non-Capturing Group(?:\s+((?:\d{1,2}|100)%|0(?:\.\d+)?|1))?

\)the literal ) (41₁₀ / 51₈ / 29₁₆)

$end of line

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

i modifier: insensitive. Matches without distinguishing uppercase and lowercase letters

Search reference

Regular Expression

^hsla?\((?:(-?\d+(?:deg|g?rad|turn)?),\s*((?:\d{1,2}|100)%),\s*((?:\d{1,2}|100)%)(?:,\s*((?:\d{1,2}|100)%|0(?:\.\d+)?|1))?|(-?\d+(?:deg|g?rad|turn)?)\s+((?:\d{1,2}|100)%)\s+((?:\d{1,2}|100)%)(?:\s+((?:\d{1,2}|100)%|0(?:\.\d+)?|1))?)\)$

New

hsl(123deg, 100%, 0%)
hsl(123, 100%, 0%)
hsl(123rad 100% 0%)
hsla(123grad, 100%, 0%, 0)
hsla(-123turn 100% 0% 1)
hsla(1 100% 0% 50%)

bad ones
 hsl(123deg, 100%, 0%)
hsl(123, 100%, 0%) 
hsl(123ad 100% 0%)
hsla(123grd, 100%, 0%, 0)
hsla(-123trn 100% 0% 1)
hsla(1 a% 0% 50%)

Regular Expressions 101

Regular Expression

Substitution