I have various color definitions as follows,

i.cat1{background:rgb(249, 115, 0);}  // RGB with 3 params
i.cat2{background:rgba(14, 48, 71, 0.99);}  // RGBA with 4 params

My goal is to set a new rgba(x,y,z,opacity) with a pre-defined opacity variable, say 0.4 (regardless of previous opacity if existed); but x,y,z from the existing values, which are guaranteed to exist.

Ex.

from #1:   rgb(249,115,0)      --> rgba(249,115,0,0.4)
from #2:   rgba(14,48,71,0.99) --> rgba(14,48,71,0.4)

Any quick regex solutions, other than parsing the tokens inside the parentheses and checking if it's 3 or 4 params?

Of course, we can do str.replace('rgb(', 'rgba('); as the first step, but I just want a quick 4-param expression.

Assume I'm getting the current color as a string, say var color is the original str, so this is a regexp question.

I have various color definitions as follows,

i.cat1{background:rgb(249, 115, 0);}  // RGB with 3 params
i.cat2{background:rgba(14, 48, 71, 0.99);}  // RGBA with 4 params

My goal is to set a new rgba(x,y,z,opacity) with a pre-defined opacity variable, say 0.4 (regardless of previous opacity if existed); but x,y,z from the existing values, which are guaranteed to exist.

Ex.

from #1:   rgb(249,115,0)      --> rgba(249,115,0,0.4)
from #2:   rgba(14,48,71,0.99) --> rgba(14,48,71,0.4)

Any quick regex solutions, other than parsing the tokens inside the parentheses and checking if it's 3 or 4 params?

Of course, we can do str.replace('rgb(', 'rgba('); as the first step, but I just want a quick 4-param expression.

Assume I'm getting the current color as a string, say var color is the original str, so this is a regexp question.

• javascript
• jquery
• regex

• 1 Are you planning on doing this in some sort of an editor or what? I'm confused why you are wanting to use javascript to do this. – Taplar Commented Oct 24, 2017 at 15:33
• I'm using JS to modify the background color string dynamically in code. What are other solutions for setting opacity, via CSS? – gene b. Commented Oct 24, 2017 at 15:34
• 1 Possible duplicate of Get a color ponent from an rgb string in Javascript? – ctwheels Commented Oct 24, 2017 at 15:35
• How dynamic are the background colors? Could you modify your script to instead of setting inline styles, to use classes instead? Which can be more easily swapped in and out, and the stylesheet updated to fit your needs. Edit: FWIW, your first paragraph looks like a css rule, which is why I assumed you were asking about a regex to update your stylesheet. – Taplar Commented Oct 24, 2017 at 15:37
• rgba?\((\s*\d+\s*),(\s*\d+\s*),(\s*\d+\s*)(,\s*[\d+.]+\s*)?\) – bassxzero Commented Oct 24, 2017 at 15:37

4 Answers 4

var test = [
    "rgb(249,115,0)",
    "rgba(14,48,71,0.99)",
];
console.log(test.map(function (a) {
  return a.replace(/rgba?(\(\s*\d+\s*,\s*\d+\s*,\s*\d+)(?:\s*,.+?)?\)/, 'rgba$1,0.4)');
}));

I think this regex suits your needs :

rgba?\((\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*)((?:,\s*[0-9.]*\s*)?)\)

See this Regex101. with the substitution result.

Here's my attempt

rgba?(\(([\d\s]+,?){3})(,[\d\s.]+)?(?=\)) replacing with rgba$1,0.4

var tests = ['rgb(249,115,0)','rgba(14,48,71,0.99)'];
var regex = /rgba?(\(([\d\s]+,?){3})(,[\d\s.]+)?(?=\))/;
var replace = 'rgba$1,0.4';

tests.forEach(test => {
  console.log(test.replace(regex, replace));
})

replace(/([^rgb)]+)/g, 'a$1, .4')