css - 正则表达式匹配线性梯度

Question

是否有可能使用唯一的正则表达式正确分割 background-image 线性渐变定义，即:

linear-gradient(hsl(200, 83%, 64%), hsl(200, 81%, 59%) 32%, rgb(22, 22, 22) 81%, red)

我正在寻找的是获得这样的多个匹配项(在这种情况下为 4 个匹配项):

$1:hsl(200, 83%, 64%)
$2:
$1:hsl(200, 81%, 59%)
$2:32%
$1:rgb(22, 22, 22)
$2:81%
$1:red
$2:

我目前正在尝试类似的东西:

(hsl\([^\)]*\))\s*(\d+%)?

但这只适用于 hsl，必须有一些聪明的方法来减少特定性

Answer 1

CSS 中有多种颜色格式。包括

• ‹Name›(例如“red”)
• #rgb
• #rrggbb
• rgb(r, g, b)(每个数字 0–255)
• rgb(r%, g%, b%)
• hsl(...)(如 Q 中所示)

然后是添加 alpha channel 的 hsla 和 rgba。最后是 currentColor 关键字。

最简单的方法是为每个要支持的正则表达式构建一个正则表达式，然后用交替 (|) 分隔。开始于:

#[0-9a-fA-F]{3,6}|rgb ?\([ 0-9.%,]+?\)

应该涵盖十六进制和(两者)rgb 形式。但它也会匹配无效的表达式(valid only 会更复杂)。

最后，不要忘记linear-gradient:

• 可以从方向(例如“到底部”)或 Angular 开始
• 每种颜色都可以包含一个停止点(如果您不希望颜色均匀分布):百分比或距离
• 还有repeating-linear-gradient。