Question

目前我有这个与RGB字符串匹配的正则表达式。我需要它增强，以便它足够强大，可以匹配RGB或RGBA。

rgbRegex = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/; //matches RGB

http://jsfiddle.net/YxU2m/

var rgbString =  "rgb(0, 70, 255)";
var RGBAString = "rgba(0, 70, 255, 0.5)";

var rgbRegex = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/;
//need help on this regex
//I figure it needs to be ^rgba?, and then also an optional clause to handle the opacity

var partsRGB = rgbString.match(rgbRegex);
var partsRGBA = RGBAString.match(rgbRegex);

console.log(partsRGB); //["rgb(0, 70, 255)", "0", "70", "255"]
console.log(partsRGBA); //null. I want ["rgb(0, 70, 255, 0.5)", "0", "70", "255", "0.5"]

Answer 1

这会吗？

var rgbRegex = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/

Answer 2

这不是那么简单 - 使用第四个参数rgb是非法的。您还需要允许百分比小数和整数值对于rgb数字。几乎可以在任何地方使用空间。

function getRgbish(c){
    var i= 0, itm,
    M= c.replace(/ +/g, '').match(/(rgba?)|(\d+(\.\d+)?%?)|(\.\d+)/g);
    if(M && M.length> 3){
        while(i<3){
            itm= M[++i];
            if(itm.indexOf('%')!= -1){
                itm= Math.round(parseFloat(itm)*2.55);
            }
            else itm= parseInt(itm);
            if(itm<0 || itm> 255) return NaN;
            M[i]= itm;
        }
        if(c.indexOf('rgba')=== 0){
            if(M[4]==undefined ||M[4]<0 || M[4]> 1) return NaN;
        }
        else if(M[4]) return NaN;
        return M[0]+'('+M.slice(1).join(',')+')';
    }
    return NaN;
}

<强> //测试

var A= ['rgb(100,100,255)',
'rgb(100,100,255,.75)',
'rgba(100,100,255,.75)',
'rgb(100%,100%)',
'rgb(50%,100%,0)',
'rgba(100%,100%,0)',
'rgba(110%,110%,0,1)'];

A.map(getRgbish).join('\n');

returned values:
rgb(100,100,255)
NaN
rgba(100,100,255,.75)
NaN
rgb(127,255,0)
NaN
NaN

Answer 3

我制作了一个检查rgb（）和rgba（）值的正则表达式。它检查3个0-255元组，然后检查0-1之间的可选十进制数，以获得透明度。 TLDR;

rgba?\(((25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,\s*?){2}(25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,?\s*([01]\.?\d*?)?\)

分成我们的不同部分：

rgba?\( // Match rgb( or rgba( as the a is optional

0-255与交替：

匹配

\d\d? // Match 0-99

1\d\d // Match 100 - 199

2[0-4]\d // Match 200-249

25[0-5] // Match 250 - 255

处理0-255元组周围的逗号和空格需要一些空间。我将0-255元组与强制尾随逗号和可选空格匹配

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

然后是一个带有可选逗号和空格的0-255元组 - 允许没有尾随逗号的rgb（）值

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

然后是一个可选的0-1作为整数或十进制数：

([01]\.?\d*?)? // 0 or 1 needed, dot and decimal numbers optional

我们以结束括号结束

\)

Answer 4

如果你需要严格，即排除rgb（0,70,255,0.5），你需要将两种情况融合在一起。：

var rgbRegex = /(^rgb\((\d+),\s*(\d+),\s*(\d+)\)$)|(^rgba\((\d+),\s*(\d+),\s*(\d+)(,\s*\d+\.\d+)*\)$)/;

http://jsfiddle.net/YxU2m/2/

Answer 5

function myFunction() {
    var myRegex = new RegExp(/(^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6})$|^(rgb|hsl)a\((\d{1,3}%?,\s?){3}(1|0|0?\.\d+)\)$|^(rgb|hsl)\(\d{1,3}%?(,\s?\d{1,3}%?){2}\)$)/igm);
    var el = document.getElementById('input');
    document.getElementById('value').textContent = myRegex.test(el.value);

}

<input id="input" />
<button onclick="myFunction()">Submit</button>
<br />
<p id="value"></p>

应该匹配：

#111
#1111
#222222
rgb(3,3,3)
rgba(4%,4,4%,0.4)
hsl(5,5,5)
hsla(6,6,6,0.6)

不应该匹配：

#11
rgb(2,2,2,2)
rgb(2,2,2),
rgba(3,3,3,33)
rgba(3,3,3,1)a
hsla(4,4,4,4)

Answer 6

我使用它是帮助

(.*?)(rgb|rgba)\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)/i

如果您选中rgba(102,51,68,0.6)

它会返回

1.  [0-0]   ``
2.  [0-4]   `rgba`
3.  [5-8]   `102`
4.  [9-11]  `51`
5.  [12-14] `68`
6.  [15-18] `0.6`

如果您选中rgb(102,51,68)

它会返回

1.  [21-21] ``
2.  [21-24] `rgb`
3.  [25-28] `102`
4.  [29-31] `51`
5.  [32-34] `68`

Answer 7

为RGBA值尝试以下脚本，结果是一个对象。

＆＃13;

       var getRGBA = function (string) {
          var match = string.match(/^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d*(?:\.\d+)?)\)$/);
          return match ? {
            r: Number(match[1]),
            g: Number(match[2]),
            b: Number(match[3]),
            a: Number(match[4])
          } : {}
        };
                           
        var rgba = getRGBA('rgba(255, 255, 255, 0.49)');
        console.log(rgba);

＆＃13;

Answer 8

用于模式：rbga（12,123,12,1）rbga（12,12,12，0.232342）rgb（2,3,4）

/^(rgba|rgb)\(\s?\d{1,3}\,\s?\d{1,3}\,\s?\d{1,3}(\,\s?(\d|\d\.\d+))?\s?\)$/

Answer 9

另一种版本，分别支持rgb和rgba，没有严格的空格，并允许模式rgba（255,255,255，.5）

(rgb\((((25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*?,\s*?){2}(25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*?)?\))|(rgba\(((25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*?,\s*?){2}(25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*?,\s*(0?\.\d*|0(\.\d*)?|1)?\))

Answer 10

您可以使用：捕获rgba或rgb颜色代码的100％

^(rgba(\((\s+)?(([0-9])|([1-9][0-9])|([1][0-9][0-9])|([2][0-5][0-5]))(\s+)?,(\s+)?(([0-9])|([1-9][0-9])|([1][0-9][0-9])|([2][0-5][0-5]))(\s+)?,(\s+)?(([0-9])|([1-9][0-9])|([1][0-9][0-9])|([2][0-5][0-5]))(\s+)?,(\s+)?((0|(0.[0-9][0-9]?)|1)|(1?[0-9][0-9]?\%))(\s+)?\)))|rgb(\((\s+)?(([0-9])|([1-9][0-9])|([1][0-9][0-9])|([2][0-5][0-5]))(\s+)?,(\s+)?(([0-9])|([1-9][0-9])|([1][0-9][0-9])|([2][0-5][0-5]))(\s+)?,(\s+)?(([0-9])|([1-9][0-9])|([1][0-9][0-9])|([2][0-5][0-5]))(\s+)?\))$

Answer 11

Pistus 的回答似乎是我最接近正常工作的答案。问题是您不能尝试使用 {2} 两次运行相同的匹配组，它只会为您提供第二个匹配组的两次相同答案。

这将处理以下草率的 CSS：

rgba(255 , 255 , 255 , 0.1 )
rgba( 255 , 255, 255 , .5 )
rgba( 0, 255 , 255 , 1.0 )
rgb( 0, 255 , 255 )
rgba( 0, 255 , 255 ) // <-- yes, not correct, but works

并给你一个好的、干净的回应。我并不真正需要经过正确验证的东西，而是需要一些可以为我提供干净数字的东西。

最后，这对我有用：

rgba?$\s*(25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,\s*(25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,\s*(25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,?\s*([01\.]\.?\d?)?\s*$

Regex101 的链接：https://regex101.com/r/brjTFf/1

另外，我清理了匹配的组，所以你得到的只是最干净的 JS 数组：

let regex = /rgba?\(\s*(25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,\s*(25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,\s*(25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,?\s*([01\.]\.?\d?)?\s*\)/;
let bgColor = "rgba(0, 255, 0, .5)";

console.log( bgColor.match( regex ) );

这是控制台的输出：

[
    "rgba(0, 255, 0, .5)",
    "0",
    "255",
    "0",
    ".5"
]

Answer 12

您可以通过 | 连接 2 个模式，但是您必须处理 7 个组而不是 4 个。

^rgb(?:\((\d+),\s*(\d+),\s*(\d+)\)|a\((\d+),\s*(\d+),\s*(\d+),\s*(1|0?\.\d+)\))$

这看起来像：

（图片来自 jex.im）

它不是很完整，但应该可以回答问题。

用于测试和调试：

regex101（使用 java！）
debuggex

要处理组，您可以使用替换：$1$4-$2$5-$3$6-$7。

所以你会得到

in:  rbg(1,2,3)
out: 1-2-3-

in:  rgba(1,2,3,0.3)
out: 1-2-3-0.3

然后你可以分开。

Answer 13

/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*((0+(?:\.\d+)?)|(1+(?:\.0+)?)))?\)$/.test('rgba(255,255,255,1.000000)')

正则表达式javascript匹配RGB和RGBA

13 个答案: