rgb 值的 Javascript 正则表达式答案

【问题标题】：Javascript Regular Expression for rgb valuesrgb 值的 Javascript 正则表达式
【发布时间】：2012-03-24 01:34:30
【问题描述】：

我正在尝试获取 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 think I can pull these off by Starts With and Ends With anchors... ///
r = 'From "(" to "," ';
g = 'From "," to "," ';
b = 'From "," to ")" ';

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

【问题讨论】：

/^rgb$(\d+),(\d+),(\d+)$$/
这个似乎效果最好，谢谢，Orbling！

标签： javascript regex rgb

【解决方案1】：

试试这个正则表达式：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

@yckart：这是一个全局正则表达式，所以你需要.exec 多次。每次运行您都会获得下一场比赛。在这种情况下：var regexp = /\d+/g; var r = regexp.exec(str)[0]; var g = regexp.exec(str)[0]; var b = regexp.exec(str)[0];.

【解决方案3】：

以下是一些示例代码，它们应该可以满足您的需求或为您指明正确的方向：

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]);
}

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

【讨论】：

惊喜不断。谢谢，史蒂文，它工作得很好！并感谢其他所有人的快速响应。
我使用了这段代码，但我使用了 Orbling 的正则表达式。由于某种原因，它工作得更好。我不确定为什么。有时你的正则表达式不起作用，产生一个空值。还是很棒的帮助，谢谢！
我的正则表达式和 Orbling 的区别是：Orbling 要求颜色定义是字符串中唯一的东西（他有匹配字符串开头和结尾的锚标签），Orbling 允许数字与超过 3 位数字（我的只允许 1、2 或 3 位数字），并且 Orbling 不允许使用空格。否则它们非常相似。 arc 的正则表达式实际上可能是最通用的——它允许在单个数字、逗号等之间有任何（或没有）空格。
@Strongwings：您的情况需要什么正则表达式取决于可能出现的内容的可变性。我的正则表达式假设它非常虔诚地是"rgb(#,#,#)" 形式的字符串，没有空格，没有间隙，只有三个数字包裹在 rgb(...) 位中。 Steven 的版本要求每个逗号后有空格且不超过 3 位数字，此外，它允许字符串中包含其他内容。我怀疑空格是您的输入和他的正则表达式的问题。 arc 的版本允许点之间的任何级别的间距。只需选择最简单的一种，以适应您的不同情况。
有效，除了像 rgb(999, 999, 999) 这样的值将通过测试。如果您担心这些值有错误，我会仔细检查您收到的值。

【解决方案4】：

^(\\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])$

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

【讨论】：

这不允许 249 或类似的值。允许 250 和 255，但不允许 2[0-5]{6,7,8,9}。

【解决方案5】：

我想出了这个"^(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 %s 也添加到其中？

【解决方案6】：

试试这个。 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

【讨论】：

【解决方案7】：

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

前缀是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 中的数字

【讨论】：

【解决方案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;
}

例子：

'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)

【讨论】：

您必须解释为什么要创建如此复杂的正则表达式。除此之外，rgb(01,1,1) 和 rgb(256,255,255) 是符合 css 标准的有效语法。
在示例中，我发现接受任何带有 \d {1,3}（001 或 999）的字符都让我感到困扰。我限制了第一种情况，因为零是不必要的，我限制了第二种情况，因为我目前只需要上升到 255。我的代码只是一个限制性更强的版本。
'rgb(255, 255, 255)' // true

【解决方案9】：

打字稿解决方案：

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}`);
};

【讨论】：

请不要只回答代码，请参阅How to Answer。永远记住，您不仅要回答 OP，还要回答任何未来的读者（尤其是在回答 8 年前的问题时），因此 edit 帖子包含一些关于 为什么 的解释.

【解决方案10】：

转换为#HHHHHH - 忽略透明度位

const numToHex = c => (+c).toString(16).padStart(2,"0").toUpperCase();

const rgbToHex = (rgb) => {
  const [r, g, b] = rgb.split(",");
  return "#" + numToHex(r) + numToHex(g) + numToHex(b)
};

const getRgb = sel => window
  .getComputedStyle(document.querySelector(sel), null)
  .getPropertyValue('background-color')
  .match(/(\d+, \d+, \d+)/)[1]; // assuming there will be a set

console.log(rgbToHex(getRgb(".nhcp1")));
console.log(rgbToHex(getRgb(".nhcp2")));
console.log(rgbToHex(getRgb(".nhcp3")));
console.log(rgbToHex(getRgb(".nhcp4")));
console.log(rgbToHex(getRgb(".nhcp5")));

.nhcp4 {
  background-color: teal
}

.nhcp5 {
  background-color: rgba(211, 0, 211, 0.5)
}

<div class="nhcp1" style="background-color:red">Div 1</div>
<div class="nhcp2" style="background-color:blue">Div 2</div>
<div class="nhcp3" style="background-color:green">Div 3</div>
<div class="nhcp4">Div 4</div>
<div class="nhcp5">Div 5</div>

【讨论】：