css - 驼峰式 BEM 的正则表达式

Question

我需要一个正则表达式模式来匹配遵循此结构的驼峰式 BEM 类:

BlockName_elementName-modifierName

我创建了这个正则表达式来完成这项工作:

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

应匹配的字符串示例:

Block
BlockName
BlockNameLonger
BlockName93

BlockName_element
BlockName_elementName
BlockName_elementNameLonger
BlockName_4elementName

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

目前它匹配除“较长”字符串以外的所有字符串。我不知道如何正确分组以匹配任何长度的 Camel 案例组。谁能帮忙？

在此处查看演示:http://regexr.com/3h0sf

Answer 1

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

分成几组以了解每组匹配的内容:

• ([A-Z][a-z0-9]+)+ 至少 1 组 1 个大写和至少 1 个小写/数字

• (\_[a-z0-9]+[A-Z0-9]?[a-z0-9]*)? 可选，下划线后跟一些数字较低/数字，然后可选的一个较高，然后是任意数量的较低/数字

• (\-[a-z0-9]+[A-Z0-9]?[a-z0-9]*)? 同上，除了以 a 开头破折号。

我们需要将 2nd 和 3rd 更改为在一组小写字母之后表现得像 1st，所以我们只需要把它拼接进去:

• (\_[a-z0-9]+([A-Z][a-z0-9]+)*)?(将 + 更改为 * 因为可能不是任何大写组)

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

一起:

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