Regex for camel case BEM

Question

I need a regex pattern to match camel case BEM classes following this structure:

BlockName_elementName-modifierName

I've created this regex to do the job:

([A-Z][a-z0-9]+)+(\_[a-z0-9]+[A-Z0-9]?[a-z0-9]*)?(\-[a-z0-9]+[A-Z0-9]?[a-z0-9]*)?

Examples of strings that should match:

Block
BlockName
BlockNameLonger
BlockName93

BlockName_element
BlockName_elementName
BlockName_elementNameLonger
BlockName_4elementName

BlockName_elementName-modifier
BlockName_elementName-modifierName
BlockName_elementName-modifierNameLonger
BlockName_elementName-modifier567Name

Currently it matches all except the 'longer' strings. I can't work out how to group correctly to match any length of camel case groups. Can anyone help?

See demo here: http://regexr.com/3h0sf

Your regex appears to be working for me. Can you include some negative cases? — Tim Biegeleisen, Oct 21 '17 at 10:09
@TimBiegeleisen In the link I posted the strings with `Longer` at the end are being matched as 2 separate things rather than a single match. — CaribouCode, Oct 21 '17 at 10:13

Tordek · Accepted Answer · 2017-10-21T10:20:17.853

4

Original: ([A-Z][a-z0-9]+)+(\_[a-z0-9]+[A-Z0-9]?[a-z0-9]*)?(\-[a-z0-9]+[A-Z0-9]?[a-z0-9]*)?

Split into groups to understand what each is matching:

([A-Z][a-z0-9]+)+ At least 1 group of 1 Uppercase and at least 1 lower/number
(\_[a-z0-9]+[A-Z0-9]?[a-z0-9]*)? Optionally, an underscore followed by some number of lower/number, then optionally one upper, then any amount of lower/number
(\-[a-z0-9]+[A-Z0-9]?[a-z0-9]*)? Same as above, except starting with a dash.

We need to change the 2nd and 3rd to behave like the 1st after a group of lowercase, so we just need to splice it into them:

(\_[a-z0-9]+([A-Z][a-z0-9]+)*)? (Change the + to a * because there might not be any uppercase groups)
(\-[a-z0-9]+([A-Z][a-z0-9]+)*)?

All together:

([A-Z][a-z0-9]+)+(\_[a-z0-9]+([A-Z][a-z0-9]+)*)?(\-[a-z0-9]+([A-Z][a-z0-9]+)*)?

edited Oct 21 '17 at 10:20

answered Oct 21 '17 at 10:12

Tordek

10,628
3
36
67

I don't know if this is relevant, but this will match `BlockName-modifierNameLonger`; if that's not a valid construction, it can be changed to avoid it. – Tordek Oct 21 '17 at 10:17
1

Fantastic! It always seems so obvious when someone shows you the way. Thank you. With regards to your comment, since this still follows traditional BEM rules, yes a block can be followed by a modifier so it's fine for it to match that too. – CaribouCode Oct 21 '17 at 10:19

Regex for camel case BEM

1 Answers1