CSS选择器的破折号案例正则表达式

Question

(我不太擅长正则表达式(

我尝试配置我的 SCSS linter，以便它只接受破折号大小写的类选择器：

a-b-c // VALID
a__b // INVALID (underscore)
& // VALID (used in SCSS)
&-q // VALID
&& // INVALID (not desirable)
a-1 // VALID
a-1- // INVALID (trailing dash is not desirable)

我必须否认骆驼案例/帕斯卡案例：

Abc // INVALID
aBc // INVALID

我必须否认 BEM(块元素修饰符(：

a__b--c // INVALID (double underscores and double dashes)

这就是我试图做的：

^&?[a-z]*([a-z0-9]*|-?)*$

但它有一些缺陷：

q- // VALID (wrong: trailing dash)
q--w // VALID (wrong: double dashes)

正则表达式对我来说真的很难。我试图自己实现它，但一件事总是破坏另一件事。

Answer 1

您可以使用

^&?(?:-?[a-z0-9]+(?:-[a-z0-9]+)*)?$

查看正则表达式演示

详

• ^- 字符串的开头
• &?- 可选的&字符
• (?:-?[a-z0-9]+(?:-[a-z0-9]+)*)?- 匹配以下模式序列的 1 次或 0 次匹配的可选组：
  • -?- 可选连字符
  • [a-z0-9]+- 1+ 小写字母或数字
  • (?:-[a-z0-9]+)*- 出现 0 次或多次-，然后出现 1+ 小写字母或数字
• $- 字符串的结尾。