Rgb颜色和十六进制颜色值的相互转换「建议收藏」

大家好，欢迎来到IT知识分享网。

前言：最近答了各大厂的笔试题，答得都很不好，还是基础太差了，尤其在正则表达式方面老是不会写，今天就做两个练习题巩固一下。

一. 将rgb颜色值转换为十六进制值输出，转换前验证rgb的格式是否正确

关于这个题主要就是考察正则表达式的运用了

1 . 验证rgb的正则表达式：

var reg = /^rgb\((\s*[1-2]?[0-9]?[0-9]{ 
   1}\,)(\s*[1-2]?[0-9]?[0-9]{ 
   1}\,)(\s*[1-2]?[0-9]?[0-9]{ 
   1})\)$/;

2 . 如何获取rgb中的颜色值 ：

方法一：

var matches = reg.exec(rgb);
console.log(matches[1], matches[2], matches[3]);

方法二：

console.log(RegExp.$1, RegExp.$2, RegExp.$3);

3 . 完整代码：

function changeRgbColorToHex(rgbColor){ 
   

        var reg = /^rgb\((\s*[1-2]?[0-9]?[0-9]{1}\,)(\s*[1-2]?[0-9]?[0-9]{1}\,)(\s*[1-2]?[0-9]?[0-9]{1})\)$/;

        if (reg.test(rgbColor)){
            var matches = reg.exec(rgbColor);
            var hexColor = '#';
            for (var i = 1; i <= 3; i++){
                if (parseInt(matches[i]) < 16){
                    hexColor += '0' + parseInt(matches[i]).toString(16)
                }else{
                    hexColor += parseInt(matches[i]).toString(16);
                }
            }
        }

        return hexColor;
    }

二. 十六进制颜色值转换为Rgb颜色值

相比上一个转换的正则，这个正则简单多了，不做多的解释直接上代码：

function changeHexColorToRgb(hexColor){ 
   
        var hex = '#f0f0f0';
        var reg = /^\#[a-fA-f0-9]{6}$/;
        if (reg.test(hex)){
            var rgbColor = 'rgb('
            for (var i = 1; i < hexColor.length; i+=2){
                var str = hexColor[i] + hexColor[i + 1];
                if (i < 5){
                    rgbColor += parseInt(str, 16) + ',';
                }else{
                    rgbColor += parseInt(str, 16) + ')';
                }

            }
        }

        return rgbColor;
    }

三. 运行结果

var hexColor = changeRgbColorToHex('rgb(255, 0, 0)');
var rgbColor = changeHexColorToRgb('#f0d0c0');
console.log(hexColor, rgbColor);