Question

我有一个应用于元素的渐变，我正在尝试使用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"

Answer 1

您的正则表达式不起作用，因为.*也匹配) - 因此，如果我们将其修改为[^\)]*，它就会成为您所追求的目标：

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/

Answer 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- 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%", ""]

你有自己的价值观，我们只需要两个简单的正则表达式。

Answer 3

我想使用单个正则表达式来避免使用多行代码来完成工作，但似乎单个正则表达式无法实现我想做的事。

我开始明白，如果您使用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"

捕获多个RGB值

3 个答案: