rgb 值的 Javascript 正则表达式

Javascript Regular Expression for rgb values

提问by cja

I'm trying to get the individual values of a rgb string. I've been getting close, but I'm just hitting a wall. I'm looking to do something like this:

我正在尝试获取 rgb 字符串的各个值。我已经接近了，但我只是撞到了一堵墙。我正在做这样的事情：

var color = rgb(255, 85, 120);

/// My Regex ///
var rRegex = /^rgb\(\d{3}/;  // Which actually gives me an array of two strings...ugh
var gRegex = ;
var bRegex = ;

var r = color.match(rRegex);
var g = color.match(gRegex);
var b = color.match(bRegex);

I'm just looking to have:

我只是想拥有：

/// // I think I can pull these off by Starts With and Ends With anchors... ///
r = 'From "(" to "," ';
g = 'From "," to "," ';
b = 'From "," to ")" ';

I'm trying to make also make it so that the regex can take either 1, 2, or 3 numbers, as the values go from 0 - 255. Thanks for any help!

我正在努力使正则表达式可以采用 1、2 或 3 个数字，因为值从 0 到 255。感谢您的帮助！

回答by Steven Oxley

Here is some example code that should do approximately what you need or set you in the right direction:

以下是一些示例代码，它们应该可以大致满足您的需求或让您朝着正确的方向前进：

var color = 'rgb(255, 15, 120)';
var matchColors = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/;
var match = matchColors.exec(color);
if (match !== null) {
    document.write('Red: ' + match[1] + ' Green: ' + match[2] + ' Blue: ' + match[3]);
}

You can see it in action here: http://jsfiddle.net/xonev/dRk8d/

你可以在这里看到它的实际效果：http: //jsfiddle.net/xonev/dRk8d/

回答by swhgraham

I have come up with this "^(rgb)?\(?([01]?\d\d?|2[0-4]\d|25[0-5])(\W+)([01]?\d\d?|2[0-4]\d|25[0-5])\W+(([01]?\d\d?|2[0-4]\d|25[0-5])\)?)$"which can validate a whole heap of string variations including:

我想出了这个"^(rgb)?\(?([01]?\d\d?|2[0-4]\d|25[0-5])(\W+)([01]?\d\d?|2[0-4]\d|25[0-5])\W+(([01]?\d\d?|2[0-4]\d|25[0-5])\)?)$"可以验证整个字符串变体的方法，包括：

• rgb(255,255,255)
• rgb(255, 255, 255) rgb(0/0/0)
• rgb(50-50-50)
• rgb(0 - 0 - 0)
• rgb(255,0-50)
• rgb(0, 255 255)
• rgb( 0 0 0 )
• 255,255,255
• 255, 255, 0
• (0, 0, 30)
• (255 - 255 - 255)
• rgb0 0 0
• rgb255 - 0/255

• RGB（255,255,255）
• rgb(255, 255, 255) rgb(0/0/0)
• RGB(50-50-50)
• RGB（0 - 0 - 0）
• RGB(255,0-50)
• RGB (0, 255 255)
• RGB（0 0 0）
• 255,255,255
• 255, 255, 0
• (0, 0, 30)
• (255 - 255 - 255)
• RGB0 0 0
• RGB255 - 0/255

回答by arc

Try this regex:

试试这个正则表达式：

/rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/

It will capture the r value into $1, the g value into $2, and the b value into $3

它会将 r 值捕获到 $1 中，将 g 值捕获到 $2 中，将 b 值捕获到 $3 中

回答by pimvdb

Given a string is valid rgb, parsing numbers out it is a matter of matching digits:

给定一个字符串是有效的 rgb，解析数字是匹配数字的问题：

"rgb(12, 34, 56)".match(/\d+/g); // ["12", "34", "56"]

回答by dKucharczyk

I use this one: rgb\(\s*(?:(?:\d{1,2}|1\d\d|2(?:[0-4]\d|5[0-5]))\s*,?){3}\)$

我用这个： rgb\(\s*(?:(?:\d{1,2}|1\d\d|2(?:[0-4]\d|5[0-5]))\s*,?){3}\)$

• prefix is rgb

• at the end we have {3}it means we will checks conditions from below 3 times

• \d{1,2}if value inside have only 1 or 2 symbols - check if there are digits

• 1\d\dif value inside have 3 digits and first one is equals to 1and rest of them are digits

• 2(?:[0-4]\d|5[0-5])if value inside have 3 digits and first one is equals to 2then
  • ?:[0-4]\dif second symbol is in range of 0-4the third one should any digit
  • 5[0-5]if second symbol is equals to 5then third symbol should be digit from range 0-5

• 前缀是 rgb

• 最后我们有{3}这意味着我们将从以下3次检查条件

• \d{1,2}如果里面的值只有 1 或 2 个符号 - 检查是否有数字

• 1\d\d如果里面的值有 3 位数字，第一个等于1，其余的都是数字

• 2(?:[0-4]\d|5[0-5])如果里面的值有 3 位数字并且第一个等于2那么
  • ?:[0-4]\d如果第二个符号在0-4第三个的范围内应该是任何数字
  • 5[0-5]如果第二个符号等于5那么第三个符号应该是范围内的数字0-5

回答by Luis Lobo

function rgb(value) {
  if (typeof value !== 'string') {
    return false;
  }

  return value.match(new RegExp('^rgb\((25[0-5]|2[0-4][0-9]|1[0-9]?[0-9]?|[1-9][0-9]?|[0-9]), ?(25[0-5]|2[0-4][0-9]|1[0-9]?[0-9]?|[1-9][0-9]?|[0-9]), ?(25[0-5]|2[0-4][0-9]|1[0-9]?[0-9]?|[1-9][0-9]?|[0-9])\)$')) !== null;
}

function rgba(value) {
  if (typeof value !== 'string') {
    return false;
  }

  return value.match(new RegExp('^rgba\((25[0-5]|2[0-4][0-9]|1[0-9]?[0-9]?|[1-9][0-9]?|[0-9]), ?(25[0-5]|2[0-4][0-9]|1[0-9]?[0-9]?|[1-9][0-9]?|[0-9]), ?(25[0-5]|2[0-4][0-9]|1[0-9]?[0-9]?|[1-9][0-9]?|[0-9]), ?(1|0|0\.[0-9]+)\)$')) !== null;
}

Examples:

例子：

'rgb(255,255,255)' // true
'rgb(255, 255,255)' // true
'rgb(255, 255, 255)' // true
'rgb(0,0,0)' // true
'rgb(255,255,255)' // true
'rgb(256,255,255)' // false, min: 0, max: 255
'rgb(01,1,1)' // false, zero is not accepted on the left, except when the value was exactly 0 (here 0 != 00)

回答by Achilles Rasquinha

Try this. A regex within the range 0 - 255.

试试这个。0 - 255 范围内的正则表达式。

rgb\((( *0*([1]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5]) *),){2}( *0*([1]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5]) *)\)

Debuggex Demo

调试器演示

回答by Kristof Debruyne

^(\d{1,2}|[1][0-9][0-9]|[2][0-5][0-5]);(\d{1,2}|[1][0-9][0-9]|[2][0-5][0-5]);(\d{1,2}|[1][0-9][0-9]|[2][0-5][0-5])$ 

format x;x;xwhere xis a number between 0(included) and 255(included)

格式x;x;x其中x是0（包含）和255（包含）之间的数字

回答by Bohdan Pomohaibo

Typescript solution:

打字稿解决方案：

interface RGB {
  r: number,
  g: number,
  b: number
}

const str2rgb = (color: string): RGB => {
  const rgbSubset = color
    .split('(')
    .pop()
    ?.split(')')
    .shift()
    ?.split(',')
    .slice(0, 3)
    .map(Number);

  if (rgbSubset && rgbSubset.length === 3) {
    const [r, g, b] = rgbSubset;
    return {r, g, b};
  }

  throw new Error(`Invalid color = ${color}`);
};