如何从javascript中的rgb字符串中提取颜色值[重复]

Posted 2023-03-06

【中文标题】如何从javascript中的rgb字符串中提取颜色值[重复]

【英文标题】：How to extract color values from rgb string in javascript [duplicate]

【发布时间】：2016-05-01 01:15:35

【问题描述】：

javascript 代码

$(".designer-element").each(function () 
        var $this = $(this),
        var  moot = $this.css(["color", "border-color", "background-color"]);
 );

用于获取元素颜色。这会将颜色作为字符串返回，例如

"background-color": "rgba(0, 0, 0, 0)"
"border-color": "rgb(211, 211, 211)"
"color": "rgb(51, 51, 51)"

如何从这些字符串中提取单独的 r 、 g 和 b 值。不需要值。 还是有更好的方法直接返回这些颜色值？

substrg 不能使用，因为值具有 1-3 位的可变大小 可以使用一些正则表达式吗？

使用了html5、jquery、jquery-ui和bootstrap。

【参考方案1】：

您可以使用正则表达式：

function getRGB(str)
  var match = str.match(/rgba?\((\d1,3), ?(\d1,3), ?(\d1,3)\)?(?:, ?(\d(?:\.\d?))\))?/);
  return match ? 
    red: match[1],
    green: match[2],
    blue: match[3]
   : ;


console.log(getRGB("rgb(211, 211, 211)"));
console.log(getRGB("rgba(211, 0, 211, 0.5)"));

【讨论】：

这里需要一点修复。要匹配以下值：“rgba(1,2,3,0.25)”和“rgba(1,2,3,0)” - rgba?\((\d1,3), ?(\d1,3), ?(\d1,3)\)?(?:, ?(\d(?:\.\d*)?)\))?

【参考方案2】：

使用正则表达式来捕获如下所示的 rbg 值

~/((.*?))/

然后您将使用字符串得到“0,0,0”拆分，您将获得数字数组，并根据数组的长度确定各个值

【讨论】：

你至少可以写出正确的正则表达式/rgba?\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d\.]+))?\s*\)/

【参考方案3】：

如果您出于性能原因想避免使用正则表达式，请尝试以下操作：

function getRGBValues(str) 
  var vals = str.substring(str.indexOf('(') +1, str.length -1).split(', ');
  return 
    'r': vals[0],
    'g': vals[1],
    'b': vals[2]
  ;

【讨论】：

我收到一个错误，因为 a 没有定义。

对不起，@ashleedawg，在这种情况下它应该是“str”。修好了。

【参考方案4】：

这是我用的

// return array of [r,g,b,a] from any valid color. if failed returns undefined
function colorValues(color)

    if (color === '')
        return;
    if (color.toLowerCase() === 'transparent')
        return [0, 0, 0, 0];
    if (color[0] === '#')
    
        if (color.length < 7)
        
            // convert #RGB and #RGBA to #RRGGBB and #RRGGBBAA
            color = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : '');
        
        return [parseInt(color.substr(1, 2), 16),
            parseInt(color.substr(3, 2), 16),
            parseInt(color.substr(5, 2), 16),
            color.length > 7 ? parseInt(color.substr(7, 2), 16)/255 : 1];
    
    if (color.indexOf('rgb') === -1)
    
        // convert named colors
        var temp_elem = document.body.appendChild(document.createElement('fictum')); // intentionally use unknown tag to lower chances of css rule override with !important
        var flag = 'rgb(1, 2, 3)'; // this flag tested on chrome 59, ff 53, ie9, ie10, ie11, edge 14
        temp_elem.style.color = flag;
        if (temp_elem.style.color !== flag)
            return; // color set failed - some monstrous css rule is probably taking over the color of our object
        temp_elem.style.color = color;
        if (temp_elem.style.color === flag || temp_elem.style.color === '')
            return; // color parse failed
        color = getComputedStyle(temp_elem).color;
        document.body.removeChild(temp_elem);
    
    if (color.indexOf('rgb') === 0)
    
        if (color.indexOf('rgba') === -1)
            color += ',1'; // convert 'rgb(R,G,B)' to 'rgb(R,G,B)A' which looks awful but will pass the regxep below
        return color.match(/[\.\d]+/g).map(function (a)
        
            return +a
        );
    

https://gist.github.com/oriadam/396a4beaaad465ca921618f2f2444d49

例子

colorValues('transparent'); // [0,0,0,0]
colorValues('white'); // [255, 255, 255, 1]
colorValues('teal'); // [0, 128, 128, 1]
colorValues('rgba(11,22,33,.44)'); // [11, 22, 33, 0.44]
colorValues('rgb(11,22,33)'); // [11, 22, 33, 1]
colorValues('#abc'); // [170, 187, 204, 1]
colorValues('#abc6'); // [170, 187, 204, 0.4]
colorValues('#aabbcc'); // [170, 187, 204, 1]
colorValues('#aabbcc66'); // [170, 187, 204, 0.4]
colorValues('asdf'); // undefined
colorValues(''); // undefined
colorValues(NaN); // Script Error
colorValues(123); // Script Error

【讨论】：

我的救主非常感谢您提供此功能！像我的项目一样工作:) :) +1 ;)

【参考方案5】：

如果您希望 RGB 返回值作为整数数组

    function toRGB(str) 
        let sep = str.indexOf(",") > -1 ? "," : " ";
        return  str.substr(4).split(")")[0].split(sep).map(Number);