将渐变字符串解析为颜色

Question

我有这些字符串

linear-gradient(90deg, rgba(196,97,97,1), #222222)
linear-gradient(90deg, #222222, #222222)
linear-gradient(90deg, #222, #22222280)
linear-gradient(90deg, rgba(196,97,97,1), rgba(196,97,97,1))

而不是 90 度，也可以是径向的，但我的问题是我怎样才能从这些字符串中只获取颜色，所以输出将是

[rgba(196,97,97,1), #222222]
[#222222, #222222]
[#222, #22222280]
[rgba(196,97,97,1), rgba(196,97,97,1)]

当没有 hex 和 2x rgba 时，我设法用 .match(/rgba\(.*?\)/g) 做到了，但是我该怎么做呢？有 hex 和 rgba，hex 和 hex 不透明等等？

Answer 1

您可以使用

.match(/rgba\([^()]*\)|#\w+/g)

见regex demo。详情:

rgba\([^()]*\) - rgba( 子字符串，然后是 ( 和 ) 以外的零个或多个字符，然后是 ) 字符
| - 或
#\w+ - 一个 # 字符，然后是一个或多个字母、数字或 _。您也可以在这里使用“十六进制”字符模式，#[a-fA-F0-9]+.

查看 JavaScript 演示：

const texts = ['linear-gradient(90deg, rgba(196,97,97,1), #222222)',
'linear-gradient(90deg, #222222, #222222)',
'linear-gradient(90deg, #222, #22222280)',
'linear-gradient(90deg, rgba(196,97,97,1), rgba(196,97,97,1))'];
for (const text of texts) {
  console.log(text, '->', text.match(/rgba\([^()]*\)|#\w+/g))
}

将渐变字符串解析为颜色

Parse gradient string into colors

javascript

regex

string

gradient