JS判断RGB颜色时无空格字符串匹配不生效是什么原因？

rgb() 带空格和不带空格格式的区别 #

这两个写法的本质是不同的字符串内容，你遇到的匹配失败问题和CSS的解析、序列化规则直接相关：

• 作为CSS输入值时，rgb(128,128,128)和rgb(128, 128, 128)都是合法的，浏览器解析时都会识别为灰色，两种写法没有功能差异
• 作为浏览器输出的DOM属性值时，CSSOM规范要求rgb()格式的序列化结果需要在逗号后加一个空格，你通过returnColor拿到的颜色值（通常来自getComputedStyle或者元素的style属性）是浏览器序列化后的标准格式，默认就是带空格的rgb(128, 128, 128)，和你最初写的无空格字符串全等判断自然会返回false

更兼容的判断方案 #

直接对比字符串很容易因为不同浏览器的序列化差异出现问题，推荐两种无感知的判断方式：

• 去除所有空格后再对比

if (colorReport.replace(/\s+/g, '') === 'rgb(128,128,128)') {
  return row
}

• 提取RGB数值对比

const [r, g, b] = colorReport.match(/\d+/g).map(Number)
if (r === 128 && g === 128 && b === 128) {
  return row
}

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