从 JavaScript 中的 CSS 颜色模式字符串更改多个实体的 alpha 通道值

Question

Suppose we have this constant representing a CSS color pattern:

const COLOR = 'rgba(100,100,200, 0) rgb(100, 100, 200) rgba(100,200,250) rgba(100,200,250,0.8) rgba(40, 50, 60, 1)';

What would be the fastest method (match/regexp...?) in JavaScript to add 0.1 to the alpha channel of each rgba(...) and if it is rgb(...), to change it to rgba(...) with the alpha channel (ie: 0.1)? If a rgba(...) already has an alpha channel of 1, it should stay at 1, even though a higher value would not break anything to the computed style.

So the resulting string would be:

rgba(100,100,200, 0.1) rgba(100, 100, 200, 0.1) rgba(100,200,250,0.1) rgba(100,200,250,0.9) rgba(40, 50, 60, 1)

Answer 1

Your first step is to replace rgb with rgba, then add 0.1 to the last number is it's less than 1 and finally replace instances where you only have three values to four (this regex looks weird because some of your parenthesised numbers have spaces and others don't)

COLOR.replace(/rgb\(/g, 'rgba(').replace(/(\d\.\d|[^\d]0)\)/g, (match, p1) => {return String(Number(p1)+0.1) + ')';}).replace(/(\( *\d+ *, *\d+ *, *\d+ *)(\))/g, '$1,0.1$2')

It's important to note this will only work if your third value is ALWAYS bigger than 1.