Javascript Regular Expression for rgb values

问题

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:

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:

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/

回答2:

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(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

回答3:

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

回答4:

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

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

回答5:

I use this one: 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\d if value inside have 3 digits and first one is equals to 1 and rest of them are digits
2(?:[0-4]\d|5[0-5]) if value inside have 3 digits and first one is equals to 2 then
- ?:[0-4]\d if second symbol is in range of 0-4 the third one should any digit
- 5[0-5] if second symbol is equals to 5 then third symbol should be digit from range 0-5

回答6:

^(\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;x where x is a number between 0 (included) and 255 (included)

回答7:

Try this. A regex within the range 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

回答8:

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)

来源：https://stackoverflow.com/questions/9585973/javascript-regular-expression-for-rgb-values

标签

javascript

regex

rgb