javascript - 正则表达式匹配多个可能的选项

Question

我无法为我遇到的这个问题给出正确的标题，但我正在尝试找出如何编写一个正则表达式，该正则表达式能够匹配下面列表中的几个可能的选项。

Describe what rules should regex consider as valid?

• 必须以 dfr 开头
• 在其开头的关键字后必须包含一个破折号 -
• 可以包含双破折号--，如果它继续使用以下关键字之一:base、root、x , y
• 如果包含双破折号+关键字，例如dfr--base 后面必须包含另一个破折号，例如dfr--base-
• 之后它只能包含字母，它应该只验证小写和驼峰式大小写。
• 应使用单破折号 - 链接，并在后面包含字母

To clarify with some examples, those should be valid:

dfr--base-color-dark
dfr--root-size
dfr--x-spacing
dfr-spacing
dfr-fontWeight
dfr-borderRadius-extraSmall
dfr-grid-columns

I think that I'm very bad with regex, but of course I spent some time trying to figure this out... Playing around with RegExr.com

^dfr-((-?(base|root|x|y)+([a-zA-Z-])+)$|([a-zA-Z-]+)$)

它似乎有效，但我不确定这是否足够好，是否有一些失败案例等等......

我试图尝试一些不应该有效的例子，但它似乎很糟糕......

dfra // good
dfra- // good
dfr-Q // good
qwe-asd // good
dfr--asd // good
dfr-as2dqw // good
dfr--base--dog // good
dfr--root--x // fails (it should not pass with double dash of two keywords)
dfr-x1223 // good

感谢任何帮助。我在这里苦苦挣扎💣!

更新#1:

我刚刚更新了我的正则表达式，它似乎更好了，但还不太确定。

更新#2:

以下是它应该能够验证什么和不应该验证什么的一些示例:

// Should pass
dfr-borderRadius-extraSmall
dfr-borderRadius-full
dfr--base-color-dark
dfr--root-fontSize-small
dfr--base-fontSize
dfr-borderWidth

// Should fail
not-dfr
not-dfr-asd
dfr-1
dfr-@
dfr--a
dfr--base
dfr-root-
dfr--x-1
dfr--root--x
dfr--root-Something
dfr-border--x
dfr-asd-Asd

Answer 1

你可以用这个模式来做到这一点:

^dfr(?:--(?:base|root|[xy]))?(?:-(?!base\b|root\b|[xy]\b)[a-z]+(?:[A-Z][a-z]+)*)+$

demo

详情:

^dfr
(?:--(?:base|root|[xy]))? # optional keyword

(?: # group for other parts
    -
    (?!base\b|root\b|[xy]\b) # negative lookahead (not followed by a keyword)
    [a-z]+(?:[A-Z][a-z]+)* # a camelCase word
)+ # repeat one or more times
$

请注意，单词边界足以检查单词后面是否有破折号或字符串结尾，因为字符串中只允许使用字母和破折号。