我对JavaScript和jQuery有点陌生，现在我遇到了一个问题：
我需要将一些数据发送到PHP，其中一部分数据需要是div X的背景颜色十六进制值。
jQuery有css("background-color")函数，可以将背景的RGB值获取到JavaScript变量中。
CSS函数似乎返回这样一个字符串：rgb(0, 70, 255)。
我找不到任何获取背景颜色的十六进制值的方法（即使它在CSS中被设置为十六进制）。
因此，似乎我需要进行转换。我找到了一个将RGB转换为十六进制的函数，但需要使用三个不同的变量r、g和b来调用它。所以我需要将字符串rgb(x，xx，xxx)解析成var r=x；var g=xx；var b=xxx；的形式。
我尝试过用JavaScript解析字符串，但我并没有真正理解正则表达式的东西。
是否有办法获取div的背景颜色作为十六进制呢，或者可以将该字符串转换为三个不同的变量吗？
试着这样做：
var rgbString = "rgb(0, 70, 255)"; // get this in whatever way.
var parts = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
// parts now should be ["rgb(0, 70, 255", "0", "70", "255"]
delete (parts[0]);
for (var i = 1; i <= 3; ++i) {
parts[i] = parseInt(parts[i]).toString(16);
if (parts[i].length == 1) parts[i] = '0' + parts[i];
}
var hexString ='#'+parts.join('').toUpperCase(); // "#0070FF"
回答下面评论中的问题：
我正在尝试修改正则表达式，以处理rgb和rgba，具体取决于我得到的是哪个。有什么提示吗？谢谢。
我不确定在这个问题的上下文中是否有意义（因为你不能用十六进制表示一个rgba颜色），但我想可能还有其他用途。无论如何，您可以将正则表达式更改为以下内容：
/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(0\.\d+))?\)$/
示例输出：
var d = document.createElement('div');
d.style.backgroundColor = 'rgba( 255, 60, 50, 0)';
/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(1|0\.\d+))?\)$/.exec(d.style.backgroundColor);
// ["rgba(255, 60, 50, 0.33)", "255", "60", "50", "0.33"]
var RGBtoHEX = function(color) {
return "#"+$.map(color.match(/\b(\d+)\b/g),function(digit){
return ('0' + parseInt(digit).toString(16)).slice(-2)
}).join('');
};
var RGBtoHEX = function(color) { return "#"+(color.match(/\b(\d+)\b/g).map(function(digit){ return ('0' + parseInt(digit).toString(16)).slice(-2) })).join(''); }; - oriadam我前一段时间找到了另一个函数(by R0bb13)。它没有正则表达式，所以我不得不从nickf那里借来才能使它正常工作。我之所以发布它，是因为这是一种有趣的方法，不使用if语句或循环即可给出结果。此外，该脚本将十六进制值与#一起返回(当时我使用的Farbtastic插件需要它)
//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
var hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
// call the function: rgb( "rgb(0, 70, 255)" );
// returns: #0046ff
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
使用JQuery...
var cssColorToHex = function(colorStr){
var hex = '#';
$.each(colorStr.substring(4).split(','), function(i, str){
var h = ($.trim(str.replace(')',''))*1).toString(16);
hex += (h.length == 1) ? "0" + h : h;
});
return hex;
};
http://www.phpied.com/rgb-color-parser-in-javascript/
一个 JavaScript 类，接受一个字符串并尝试从中找出有效的颜色。一些被接受的输入例如：* rgb(0, 23, 255)
* #336699
* ffee66
* fb0
* red
* darkblue
* cadet blue
ffee66和fb0在CSS中不是有效的颜色。也许你应该先尝试一下。 - Derek 朕會功夫 //function for private usage of the function below
//(declaring this one in global scope should make it faster rather than
//declaraing it as temporary function inside stringRGB2HEX that need to be
//instantieted at every call of stringRGB2HEX
function _rgb2hex(rgb_string, r, g, b)
{
//VERY IMPORTANT: by adding (1 << 24) we avoid 'rgb(0, 0, 0)' to be mistakenly converted into '#0'
var rgb = (1 << 24) | (parseInt(r) << 16) | (parseInt(g) << 8) | parseInt(b); //same thing of: ( r + (256 * g) + (65536 * b) + 16777216)
//toString(16) specify hex 16 radix, works only for numbers [source: http://msdn.microsoft.com/en-us/library/dwab3ed2(v=VS.85).aspx]
return '#' + rgb.toString(16).substr(1); //substr(1) because we have to remove the (1 << 24) added above
}
function stringRGB2HEX(string)
{
if(typeof string === 'string')
string = string.replace(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/g, _rgb2hex);
return string;
}
这个函数还可以将像 background 这样的复杂样式中的 RGB 颜色转换。
例如，style.background 的值为 "none no-repeat scroll rgb(0, 0, 0)"，只需使用 stringRGB2HEX(style.background) 即可轻松将其转换为 "none no-repeat scroll #000000"。
这里有一个方法，允许你使用$(selector).getHexBackgroundColor()轻松地返回十六进制值：
$.fn.getHexBackgroundColor = function() {
var rgb = $(this).css('background-color');
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(1|0|0\.\d+))?\)$/在末尾附近加上了|0来检查alpha是否为0而不是0.x。 - fortuneRice(1|0|0?\.d+)，因为.3是有效的。 - nickf