驼峰式 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

目前它匹配除 'longer' 以外的所有字符串。我不知道如何正确分组以匹配任何长度的骆驼案例组。有人可以帮忙吗？

在此处查看演示：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 个 lower/number
(\_[a-z0-9]+[A-Z0-9]?[a-z0-9]*)? 可选地，一个下划线后跟一些 lower/number，然后可选地一个大写，然后是任意数量的 lower/number
(\-[a-z0-9]+[A-Z0-9]?[a-z0-9]*)? 同上，除了以破折号开头。

我们需要将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]+)*)?

驼峰式 BEM 的正则表达式

Regex for camel case BEM

css

regex

sass

stylelint