Regex Javascript To Match Both Rgb And Rgba

July 25, 2024 Post a Comment

Currently I have this regex which matches to an RGB string. I need it enhanced so that it is robust enough to match either RGB or RGBA. rgbRegex = /^rgb$(\d+),\s*(\d+),\s*(\d+)$$

Solution 1:

Will this do?

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

Solution 2:

It's not so simple- an rgb is illegal with a fourth parameter. You also need to allow for percentage decimals as well as integer values for the rgb numbers. And spaces are allowed almost anywhere.

functiongetRgbish(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) returnNaN;
            M[i]= itm;
        }
        if(c.indexOf('rgba')=== 0){
            if(M[4]==undefined ||M[4]<0 || M[4]> 1) returnNaN;
        }
        elseif(M[4]) returnNaN;
        return M[0]+'('+M.slice(1).join(',')+')';
    }
    returnNaN;
}

//testing:

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

Solution 3:

I made a regex that checks for rgb() and rgba() values. It checks for 3 tuples of 0-255 and then an optional decimal number between 0-1 for transparency. 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*?)?\)

Broken into the different parts we have:

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

0-255 is matched with alternation of:

\d\d? // Match 0-991\d\d// Match 100 - 1992[0-4]\d// Match 200-24925[0-5]// Match 250 - 255

The handling of comma and space around the 0-255 tuples takes some space. I match 0-255 tuples with mandatory trailing comma and optional spaces twice

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

Then a 0-255 tuple with optional comma and space - to allow for rgb() values without the trailing comma

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

Then comes an optional 0-1 as whole number or decimal number:

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

And we end with a closing bracket

\)

Solution 4:

Try the following script for RGBA value, the result is an object.

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

Solution 5:

If you need to be strict, i.e. rule out rgb(0, 70, 255, 0.5), you need to fuse both cases together with | :

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

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

JavaScript Site