时间戳

首页 > 解决方案 > JS中带有命名组的RGB正则表达式

javascript - JS中带有命名组的RGB正则表达式

问题描述

我正在尝试在 JS 中为具有可选不透明度值的 RGB 颜色字符串编写正则表达式。为了获取每个通道和不透明度的数据，我正在捕获命名组。

一切都按预期工作，但对我来说有些奇怪。当“B”值在 [200-255] 范围内时，最后一位总是进入不透明度组...

例如：

rgb 195 230 199-> r：195，g：230，b：199（一切都很好）

rgb 195 230 199 0.25-> r：195，g：230，b：199，不透明度：0.25（一切都很好）

rgb 195 230 200-> r：195，g：230，b：20，不透明度：0（不好）

这种奇怪的行为在 200-255 范围内同样有效。并花费数小时试图解决它，拜托，我需要一些帮助。

完整的正则表达式是：

^(?:rgb|rgba)?[\s+\/]*\(?[\s+\/]*(?<r>[01]?\d\d?|2[0-4]\d|25[0-5])[\s+\/]+(?<g>[01]?\d\d?|2[0-4]\d|25[0-5])[\s+\/]+(?<b>[01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])(?:\s)?(?<opacity>0\.\d{1,2}|[1-9]\d{0,1}(?!\d)|100|0|1)??(?:\%)?\)?$

分成几部分：

^
(?:rgb|rgba)?
[\s+\/]*
\(?
[\s+\/]*
(?<r>[01]?\d\d?|2[0-4]\d|25[0-5])
[\s+\/]+
(?<g>[01]?\d\d?|2[0-4]\d|25[0-5])
[\s+\/]+
(?<b>[01]?\d\d?|2[0-4]\d|25[0-5])
(?:\s)?
(?<opacity>0\.\d{1,2}|[1-9]\d{0,1}(?!\d)|100|0|1)??
(?:\%)?
\)?
$

标签： javascriptregex

解决方案

在最后一部分中，您匹配一个可选的空白字符(?:\s)?

如果空白字符不是可选的，则此值将不匹配rgb 195 230 200 。

但由于它是可选的，它可以匹配来自交替的组中的20<b> ，并匹配来自该交替的组中的0<opacity>。

您可以在不透明度组之前放置一个单词边界，或者使该组可选。

^(?:rgba?)?[\s\/]*\(?[\s\/]*(?<r>[01]?\d\d?|2[0-4]\d|25[0-5])[\s\/]+(?<g>[01]?\d\d?|2[0-4]\d|25[0-5])[\s+\/]+(?<b>[01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])(?: (?<opacity>0\.\d{1,2}|[1-9]\d?(?!\d)|100|0|1)?%?)?\)?$

正则表达式演示

请注意，可以通过省略多余的组和转义符来缩短模式，(?:\%)?并使用?which 与{0,1}

在这部分[\s+\/]*中，模式允许匹配一个+字符而不是重复\s1 次或多次，因为它是一个字符类。如果这不是意图，您可以省略+

推荐阅读