如何从CSS提取的背景色字符串中拆分三原色值及alpha透明度参数

getComputedStyle返回的背景色字符串格式符合W3C标准，统一为rgb(r, g, b)或rgba(r, g, b, a)格式，你可以通过正则快速解析出所有通道值，也可以单独提取alpha参数。

核心解析逻辑如下：

// 提取色值字符串里所有整数、浮点数并转为数值类型
const colorValues = colorOfBox.match(/\d+(\.\d+)?/g).map(Number);
// 长度为4是rgba格式，取第4位为alpha；长度为3是rgb格式，alpha默认值为1
const alphaOfBox = colorValues.length === 4 ? colorValues[3] : 1;
// 提取三原色通道值，取值区间为0-255
const [rChannel, gChannel, bChannel] = colorValues;

补全后的完整代码如下：

var box = document.getElementById("boxyBox");
var styleOfBox = window.getComputedStyle(box);
var colorOfBox = styleOfBox.getPropertyValue("background-color");

// 解析色值
const colorValues = colorOfBox.match(/\d+(\.\d+)?/g).map(Number);
var alphaOfBox = colorValues.length === 4 ? colorValues[3] : 1;
if(alphaOfBox < 1) {
    box.style.color = 'red'; // 注意颜色值需要加引号，避免被识别为变量报错
}

补充说明：该方案兼容所有现代浏览器，getComputedStyle返回的色值格式不会出现十六进制、HSL等其他格式，正则匹配的稳定性足够。

内容的提问来源于stack exchange，提问作者Esdeseserdt