捕获多个RGB值

Capture multiple RGB values

本文关键字：RGB 更新时间：2023-09-26

我有一个渐变应用到一个元素，我试图使用regexp从背景图像中获得RGB值。

#gradient {
    background: linear-gradient(to right,  rgba(255,0,0,1) 0%, rgba(0,0,255,1) 100%);
}

var elm             = document.getElementById("gradient");
var elementColor    = getComputedStyle(elm).backgroundImage;
// elementColor     = "linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)";
var first           = elementColor.match(/rgb'((.*)')/)[0];
var second          = elementColor.match(/rgb'((.*)')/)[1];

使用/rgb'((.*)')/不起作用，因为它返回

"rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)"

我猜这是因为括号出现了两次。我该如何解决这个问题?因此它返回

"255,0,0", "0,0,255"

您的regexp不起作用，因为.*匹配)以及-因此，如果我们将其修改为[^')]*，它将成为您所追求的:

var input = "background: linear-gradient(to right,  rgba(255,0,0,1) 0%, rgba(0,0,255,1) 100%);";
var array = input.match(/rgba'([^')]*')/gi);
for (var i=0; i<array.length; i++)
    console.log(array[i].match(/'((.*)')/)[1]);

http://jsfiddle.net/4z8Ly/2/

正则表达式很难。应该避免使用包含多个捕获组的复杂正则表达式，除非它们显然是解析某些内容的最实用的方法。

在这种情况下，我不清楚他们是。我想:

rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)

1-去掉表达式

中的圆括号

string = string.replace(/[()]/g, '');
// "rgb255, 0, 0 0%, rgb0, 0, 255 100%"

2- Split on rgb:

parts = string.split('rgb');
// ["", "255, 0, 0 0%, ", "0, 0, 255 100%"]

3-第一个元素总是空的，所以去掉它:

parts.shift()
// ["255, 0, 0 0%, ", "0, 0, 255 100%"]

4-用/,? /分隔每个元素(可选的逗号，然后是空格):

parts[0].split(/,? /g)
// ["255", "0", "0", "0%", ""]

你有你的值，我们只需要两个非常简单的正则表达式。

我想使用单个regexp来避免使用多行代码来完成工作，但似乎我想要做的是不可能使用单个regexp。

我开始明白，你不能捕获(但匹配)，如果你使用g标志。

我已经用一行代码解决了这个问题。

elementColor.match(/'('d+, 'd+, 'd+')/g)[0].replace(/[( )]/g, "");
// "linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)" -> "(255, 0, 0)" -> "255,0,0"

没有找到相关文章