如何从javascript中的rgb字符串中提取颜色值

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。

Answer 1

你可以使用正则表达式：

 function getRGB(str){ var match = str.match(/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,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)")); 

Answer 2

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

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

“`

Answer 3

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

〜/((.*?))/

然后你会得到“0,0,0”分裂，使用字符串，你会得到数组，并根据数组的长度确定单个值

Answer 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