rgb值的Javascript正则表达式

我试图获取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\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/

---

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

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

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

---

下面是一些示例代码，这些代码应该大致满足您的需要，或者为您确定正确的方向：

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

你可以在这里看到它的作用：

---

格式

x；x；x

其中

x

是介于

0

（包括）和

255

（包括）之间的一个数字我想出了这个

“^（rgb）\（？（[01]？\d\d？；2[0-4]\d | 25[0-5]）（\W+（[01]？\d\d | d | 2[0-5]）\W+（[01]？\d\d 1240-4]；d 1240-4]；d 1240 1245]）\d 1240 1240 1240 ;可以验证整个代码堆的变化


rgb（255255）
rgb（255、255、255）rgb（0/0/0）
rgb（50-50-50）
rgb（0-0-0）
rgb（255,0-50）
rgb（0，255）
rgb（0）
255255
255，255，0
（0,0,30）
（255-255-255）
RGB00
rgb255-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]) *)\)


我用这个：
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
其余的都是数字

2（？[0-4]\d | 5[0-5]）
如果其中的值有3位，并且第一位等于
2
，则

？：[0-4]\d
如果第二个符号在
0-4
范围内，则第三个符号应为任意数字
5[0-5]
如果第二个符号等于
5
，那么第三个符号应该是范围
0-5


示例：

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

类型脚本解决方案：

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


/^rgb\（\d+）、（\d+）、（\d+）$/
这一款似乎效果最好，谢谢，奥布林！最短解决方案：
“rgb（1，23，156）”。匹配（/\d+/g）；//[“1”、“23”、“156”]
请参见@pimvdb永不停止的惊喜。谢谢，史蒂文，它工作得很好！谢谢大家的快速反应。我用了这个代码，但我用了Orbling的正则表达式。出于某种原因，它工作得更好。我不知道为什么。有时您的正则表达式不起作用，生成空值。还是很棒的帮助，谢谢！我的正则表达式和Orbling之间的区别是：Orbling要求颜色定义是字符串中唯一的内容（他有匹配字符串开头和结尾的锚标记），Orbling允许数字超过3位（我的只允许1、2或3位），而Orbling不允许空格。除此之外，它们非常相似。arc的正则表达式实际上可能是最通用的，它允许单个数字、逗号等之间存在任何（或不存在）空格@Strongwings:您需要什么正则表达式来适应您的情况取决于可能出现的变量。我的正则表达式假设它是一个非常虔诚的字符串，形式是“rgb（#，#，#，#”）”

，没有空格，没有空格，只有三个数字包装在

rgb（…）

位中。Steven的版本要求每个逗号后面都有空格，且不超过3位数字，而且允许字符串中包含其他内容。我怀疑空格是你的输入和他的正则表达式的问题。arc的版本允许点之间的任何级别的间距。只需选择最简单的一个，以适应您的情况的变化。工作，除了像rgb（999，999，999）值将通过测试。如果您担心这些值有错误，我会仔细检查您收到的值。@yckart:这是一个全局regexp，所以您需要多次执行

.exec

。每次跑步你都将获得下一场比赛。在这种情况下：

var regexp=/\d+/g；var r=regexp.exec（str）[0]；var g=regexp.exec（str）[0]；var b=regexp.exec（str）[0]。这不允许249或类似的值。250是允许的，255是允许的，但不是2[0-5]{6,7,8,9}。这太完美了！如何向其中添加RGB%s？您必须解释为什么要创建如此复杂的regexp。除此之外，根据css标准，
rgb（01,1,1）
和
rgb（25625525）
是有效的语法。在这些示例中，我发现接受任何带有\d{1,3}（001或999）的字符都很麻烦。我限制了第一种情况，因为零是不必要的，而我限制了第二种情况，因为我目前只需要增加到255。我的代码只是一个限制性更强的版本。'rgb（255，255，255）//true请不要只回答代码，请参阅。永远记住，你不仅要回答OP，还要回答任何未来的读者（特别是当你回答一个8岁的问题时），因此，这篇文章必须包含一些解释，说明为什么这是有效的。
'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)

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