首页 > 试题广场 >

颜色字符串转换

[编程题]颜色字符串转换
  • 热度指数：33815 时间限制：C/C++ 2秒，其他语言4秒 空间限制：C/C++ 256M，其他语言512M
  • 算法知识视频讲解
将 rgb 颜色字符串转换为十六进制的形式，如 rgb(255, 255, 255) 转为 #ffffff
1. rgb 中每个 , 后面的空格数量不固定
2. 十六进制表达式使用六位小写字母
3. 如果输入不符合 rgb 格式，返回原始输入
样例：
输入：'rgb(255, 255, 255) '
输出：'#ffffff'

示例1

输入

'rgb(255, 255, 255)'

输出

#ffffff
算法知识视频讲解
添加回答
JavaScript
Jalrion头像 Jalrion
竟然不支持padStart() 你是 IE 么
function rgb2hex(sRGB) {
  //   const hex = (n) => (+n).toString(16).padStart(2, "0"); // IE 不支持
  const hex = (n) => ("0" + (+n).toString(16)).slice(-2);
  return sRGB.replace(
    /^rgb\((\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\)$/,
    function ($0, $1, $2, $3) {
      return "#" + hex($1) + hex($2) + hex($3);
    }
  );
}
发表于 2021-05-20 23:41:09 回复(0)
JavaScript
❄⛄❄头像 ❄⛄❄
function rgb2hex(sRGB) {
        var reg =/rgb\((\d+),\s*(\d+),\s*(\d+)\)/;
        var ret=sRGB.match(reg);
        var str='#';
        console.log(ret);
        if(!ret){
            return sRGB;
        }
        else{
            for(var i=1;i<ret.length;i++){
                var k=(1*ret[i]).toString(16);
                if(k.length<2){
                    k='0'+k;
                }
                str+=k;
            }
        }
        return str;
}

一开始的时候没用正则，结果最后一个实例就懵了，后来才发现有match这个方法
发表于 2021-05-18 19:47:21 回复(0)
JavaScript
可以教我摸鱼嘛头像 可以教我摸鱼嘛 
function rgb2hex(sRGB) {
    if (/^rgb/.test(sRGB) === false) return sRGB

    let nums = sRGB.split("(")[1].split(")")[0].split(",")

    let hex = "#"
    for (let index in nums) {
        let num = parseInt(nums[index].trim())
        console.log(num)
        hex += num >= 0 && num < 16 ? ("0" + num.toString(16).toLowerCase()):num.toString(16).toLowerCase()
    }

    return hex
}
核心：toString(16)转16进制
发表于 2021-03-31 16:54:36 回复(0)
JavaScript
bom~~头像 bom~~ 
// 这次的正则加了值的判断，也就是控制值 >= 0 并 <= 255
function rgb2hex(sRGB) {
    const str = '\\s{0,}([0-9]{1,2}|[0-2]{1}[0-5]{1}[0-5]{1})\\s{0,}'
    const reg = new RegExp(`^rgb\\(${str},${str},${str}\\)$`)
    if (!reg.test(sRGB)) return sRGB

    return '#' + sRGB
        .replace(/[^\d|^,]/g, '')
        .split(',')
        .map(item => {
            const hex = Number(item.trim()).toString(16)
            return hex.length === 1 ? '0' + hex : hex
        })
        .join('')
}

编辑于 2021-03-21 17:55:34 回复(0)
JavaScript
教教我前端吧哥哥们头像 教教我前端吧哥哥们
考虑了rgb的范围，空格的影响，还有当数值小于16时补0 
        function rgb2hex(sRGB) {
            const req = /^rgb\(((?:\s*(?:(?:[1]\d\d){1}|(?:[2][0-5][0-5]){1}|\d{2}|\d{1}),?){3})\)$/g;;
            var rgb = req.test(sRGB);
            if (rgb) {
                var color = sRGB.replace(req, function (match, $1) {
                    let arr = $1.split(',');
                    let r = Number(arr[0].trim()) > 16 ? Number(arr[0].trim()).toString(16) : "0" + Number(arr[0].trim()).toString(16);
                    let g = Number(arr[1].trim()) > 16 ? Number(arr[1].trim()).toString(16) : "0" + Number(arr[1].trim()).toString(16);
                    let b = Number(arr[2].trim()) > 16 ? Number(arr[2].trim()).toString(16) : "0" + Number(arr[2].trim()).toString(16);
                    return "#" + r.toString(16) + g.toString(16) + b.toString(16);
                });
                return color;
            };

            return sRGB;
        };


发表于 2021-01-13 22:44:32 回复(0)
JavaScript
小虎牛头像 小虎牛 
function sixteen(x) {
  x === 10 ? x = "a" : x === 11 ? x = "b" : x === 12 ? x = "c" : x === 13 ? x = "d" : x === 
14 ? x ="e" : x ===15 ? x = "f" : x
  return x
}
function rgbHex(sRgb) {
  var rgb1 = sRgb.split("(")[1]
  var rgb2 = rgb1.split(")")[0]
  var rgb3 = rgb2.split(",")
  var firstQ = parseInt(rgb3[0] / 16);
  var firstR = rgb3[0] % 16;
  var secondQ = parseInt(rgb3[1] / 16);
  var secondR = rgb3[1] % 16;
  var thirdQ = parseInt(rgb3[2] / 16);
  var thirdR = rgb3[2] % 16;
  firstQ = sixteen(firstQ);
  secondQ = sixteen(secondQ);
  thirdQ = sixteen(thirdQ);
  firstR = sixteen(firstR);
  secondR = sixteen(secondR);
  thirdR = sixteen(thirdR);
  var hex = "#" + firstQ + firstR + secondQ + 
secondR + thirdQ + thirdR
};
目前只想到这个最笨的，唉，正则就是记不住呢

发表于 2020-12-03 16:18:59 回复(0)
JavaScript
webgeeker头像 webgeeker
# 什么鬼 test case， 哪里错了也不知道

```js
function rgb2hex(sRGB = 'rgb(255, 255, 255)') {
  const log = console.log;
  function numToHex(num) {
    return num.toString(16).padStart(2, 0);
  }
  // if(/^rgb\([(\d{1,3}),\s*]{2}\d{1,3}\)$/.test(temp)) {
  // if(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/.test(temp)) {
  if(/^(rgb|RGB)\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)/.test(sRGB)) {
    // log(`符合 rgb 格式`)
    const arr = sRGB.replace(`rgb(`, ``).replace(`)`, ``).split(`,`).map(i => parseInt(i.trim()));
    let result = `#`;
    for (const i of arr) {
      result += numToHex(i);
    }
    log(`result`, result);
    return result;
  } else {
    // 输入不符合 rgb 格式，返回原始输入
    log(`输入不符合 rgb 格式，返回原始输入`)
    return sRGB;
  }
}

```
发表于 2020-08-24 22:50:06 回复(0)
JavaScript
她她她女神头像 她她她女神 
function rgb2hex(sRGB) {
    //reg是rgb判断并且分组的正则表达式，result_final是最后的输出结果
    let reg = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/, result_final = ['#'];
    // let reg = /^rgb\((\d{1,3},\s*){2}\d{1,3}\)$/;
    //如果不符合格式，直接把元字符串输出
    if (!reg.test(sRGB)) {
        return sRGB;
    }
    //如果符合样式，则进行进一步的处理
    else {
        let result = reg.exec(sRGB);
        //result[1] result[2] result[3]分别代表每一个分组
        for (let i = 1; i <= 3; i++) {
            //result_item代表每一个分组之后10进制的结果，res代表16进制的结果
            let result_item = [], res = [];
            //利用加号转换为数字
            result[i] = +result[i];
            //如果是0直接变为['0','0'],否则为[]
            res = result[i] === 0 ? ['0', '0'] : [];
            while (result[i]) {
                result_item.push(result[i] % 16);
                result[i] = result[i] / 16 | 0;
            }
            //遍历每一个分组，将其转换为16进制的数字
            result_item.forEach(item => {
                switch (item) {
                    case 10: item = 'a'; break;
                    case 11: item = 'b'; break;
                    case 12: item = 'c'; break;
                    case 13: item = 'd'; break;
                    case 14: item = 'e'; break;
                    case 15: item = 'f'; break;
                    default: item += ''; break;
                }
                res.push(item)
            })
            //因为res保存的从上到下的余数，16进制输出时需要从下到上，所以需要反转
            //将res最后的结果反转保存在result_final中
            result_final = result_final.concat(res.reverse());
        }
    }
    //将最后结果变为字符串，并且同时去掉逗号，返回出去
    return result_final.toString().replace(/,/g, '');
}

发表于 2020-07-22 09:11:16 回复(0)
JavaScript
一条菜狗头像 一条菜狗 
function rgb2hex(sRGB) {
    let str = '#'
    let arr = sRGB.substr(4, sRGB.length - 4 -1).split(',')
    for (let i=0; i<arr.length; i++) {
        arr[i] = parseInt(arr[i].trim())
        if (arr[i] < 0 || arr[i] > 255 || isNaN(arr[i]) == true) {
            return sRGB
        }
        arr[i] = arr[i].toString(16)
        if (arr[i].length < 2) {
            arr[i] = '0' + arr[i]
        }
        str += arr[i]
    }
    return str
}
没有用正则
发表于 2020-04-05 15:27:46 回复(0)
JavaScript
ataola头像 ataola
放开那个颜色字符串转换，让我来，超级无敌定海神针！我可是个场面人。关于这题的总结请参看：https://github.com/ataola/ataolaSkillsStack/blob/master/tiku/tijie/57.md 
function rgb2hex(sRGB) {
    let rgbObj = {
        0: "00",
        1: "01",
        2: "02",
        3: "03",
        4: "04",
        5: "05",
        6: "06",
        7: "07",
        8: "08",
        9: "09",
        10: "0a",
        11: "0b",
        12: "0c",
        13: "0d",
        14: "0e",
        15: "0f",
        16: "10",
        17: "11",
        18: "12",
        19: "13",
        20: "14",
        21: "15",
        22: "16",
        23: "17",
        24: "18",
        25: "19",
        26: "1a",
        27: "1b",
        28: "1c",
        29: "1d",
        30: "1e",
        31: "1f",
        32: "20",
        33: "21",
        34: "22",
        35: "23",
        36: "24",
        37: "25",
        38: "26",
        39: "27",
        40: "28",
        41: "29",
        42: "2a",
        43: "2b",
        44: "2c",
        45: "2d",
        46: "2e",
        47: "2f",
        48: "30",
        49: "31",
        50: "32",
        51: "33",
        52: "34",
        53: "35",
        54: "36",
        55: "37",
        56: "38",
        57: "39",
        58: "3a",
        59: "3b",
        60: "3c",
        61: "3d",
        62: "3e",
        63: "3f",
        64: "40",
        65: "41",
        66: "42",
        67: "43",
        68: "44",
        69: "45",
        70: "46",
        71: "47",
        72: "48",
        73: "49",
        74: "4a",
        75: "4b",
        76: "4c",
        77: "4d",
        78: "4e",
        79: "4f",
        80: "50",
        81: "51",
        82: "52",
        83: "53",
        84: "54",
        85: "55",
        86: "56",
        87: "57",
        88: "58",
        89: "59",
        90: "5a",
        91: "5b",
        92: "5c",
        93: "5d",
        94: "5e",
        95: "5f",
        96: "60",
        97: "61",
        98: "62",
        99: "63",
        100: "64",
        101: "65",
        102: "66",
        103: "67",
        104: "68",
        105: "69",
        106: "6a",
        107: "6b",
        108: "6c",
        109: "6d",
        110: "6e",
        111: "6f",
        112: "70",
        113: "71",
        114: "72",
        115: "73",
        116: "74",
        117: "75",
        118: "76",
        119: "77",
        120: "78",
        121: "79",
        122: "7a",
        123: "7b",
        124: "7c",
        125: "7d",
        126: "7e",
        127: "7f",
        128: "80",
        129: "81",
        130: "82",
        131: "83",
        132: "84",
        133: "85",
        134: "86",
        135: "87",
        136: "88",
        137: "89",
        138: "8a",
        139: "8b",
        140: "8c",
        141: "8d",
        142: "8e",
        143: "8f",
        144: "90",
        145: "91",
        146: "92",
        147: "93",
        148: "94",
        149: "95",
        150: "96",
        151: "97",
        152: "98",
        153: "99",
        154: "9a",
        155: "9b",
        156: "9c",
        157: "9d",
        158: "9e",
        159: "9f",
        160: "a0",
        161: "a1",
        162: "a2",
        163: "a3",
        164: "a4",
        165: "a5",
        166: "a6",
        167: "a7",
        168: "a8",
        169: "a9",
        170: "aa",
        171: "ab",
        172: "ac",
        173: "ad",
        174: "ae",
        175: "af",
        176: "b0",
        177: "b1",
        178: "b2",
        179: "b3",
        180: "b4",
        181: "b5",
        182: "b6",
        183: "b7",
        184: "b8",
        185: "b9",
        186: "ba",
        187: "bb",
        188: "bc",
        189: "bd",
        190: "be",
        191: "bf",
        192: "c0",
        193: "c1",
        194: "c2",
        195: "c3",
        196: "c4",
        197: "c5",
        198: "c6",
        199: "c7",
        200: "c8",
        201: "c9",
        202: "ca",
        203: "cb",
        204: "cc",
        205: "cd",
        206: "ce",
        207: "cf",
        208: "d0",
        209: "d1",
        210: "d2",
        211: "d3",
        212: "d4",
        213: "d5",
        214: "d6",
        215: "d7",
        216: "d8",
        217: "d9",
        218: "da",
        219: "db",
        220: "dc",
        221: "dd",
        222: "de",
        223: "df",
        224: "e0",
        225: "e1",
        226: "e2",
        227: "e3",
        228: "e4",
        229: "e5",
        230: "e6",
        231: "e7",
        232: "e8",
        233: "e9",
        234: "ea",
        235: "eb",
        236: "ec",
        237: "ed",
        238: "ee",
        239: "ef",
        240: "f0",
        241: "f1",
        242: "f2",
        243: "f3",
        244: "f4",
        245: "f5",
        246: "f6",
        247: "f7",
        248: "f8",
        249: "f9",
        250: "fa",
        251: "fb",
        252: "fc",
        253: "fd",
        254: "fe",
        255: "ff",
    };
    if (/^rgb\(\d|[1-9]\d|1\d{2}|2[0-5]{2},\s*\\d|[1-9]\d|1\d{2}|2[0-5]{2},\s*\d|[1-9]\d|1\d{2}|2[0-5]{2}\)$/.test(sRGB)) {
        return '#' + sRGB.match(/\d{1,3}/g).map(function (x) {
            return rgbObj[x];
        }).join('');
    } else {
        return sRGB;
    }
}

发表于 2019-11-27 17:18:12 回复(0)
JavaScript
supreme555头像 supreme555
function rgb2hex(sRGB) {
var result;
var reg = /^rgb\(([0-9]{1,3},)(\s*[0-9]{1,3},)(\s*[0-9]{1,3})\)$/;
if(!reg.test(sRGB)) {// 错误的rbg格式情况
result = sRGB;
}
else { // 正确的RBG格式情况
var arr = sRGB.split('(')[1].split(')')[0].split(',').map(function(value, index) {
// 如果小于16，那么转换成十六进制只有一位字母，所以需要前面补个0
// 那么就可以不论转换成16进制是一位还是两位，都给前面补0，然后截取后两位即可
//注意NumberObj.toString(16)方法，所以需要先转成数字类型
return ('0' + Number(value.trim()).toString(16)).slice(-2);
});
result = '#' + arr.join('');
}
return result;
}
编辑于 2019-04-02 16:38:15 回复(0)
JavaScript
绿皮兔子头像 绿皮兔子 
function rgb2hex(sRGB) { var arr = sRGB.match(/^rgb[(]([\d]{1,3}),[\s]*([\d]{1,3}),[\s]*([\d]{1,3})[)]$/) if(!arr)return sRGB var str = "#"  for (var i = 1;i<arr.length;i++) str += ("0"+Number(arr[i]).toString(16)).slice(-2) return str }
发表于 2018-12-31 17:29:49 回复(0)
JavaScript
Geeook头像 Geeook 
// 还差数字可能超过255没有考虑，对不起
function rgb2hex(sRGB) {
  var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"]
  var rgb = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/gi
  var res = rgb.exec(sRGB)
  if (!res) return sRGB
  return res.slice(1).reduce(function (hex, item) {
    var fir = Math.floor(item / 16)
    var sec = item - fir * 16
    console.log(hex)
    return hex + arr[fir] + arr[sec]
  }, "#")
}

发表于 2017-08-29 19:42:48 回复(0)
JavaScript
Zfirsty头像 Zfirsty 

	// slice
 function rgb2hex(sRGB) {


    if(sRGB.slice(0,4)!=='rgb(' || sRGB.slice(-1)!==')') return sRGB;
     var rgb = sRGB.slice(4,-1).split(',');
     if(rgb.length<3) return sRGB;
     var rs='#';
     var num;
     for(var i=0;i<3;i++){
         if(isNaN((num=parseInt(rgb[i])))) return sRGB;
         if(num>255 || num<0) return  sRGB;
         rs+=num.toString(16).length===1?'0'+num.toString(16):num.toString(16);
     }
     return rs;
 }
编辑于 2017-10-19 12:57:23 回复(0)
JavaScript
華方头像 華方 
function rgb2hex(sRGB) {
    if(/^rgb\((\d{1,3},\s*){2}\d{1,3}\)$/.test(sRGB)){
        var re = '#'
        var matchs = sRGB.match(/(\d{1,3})/g)
        for(var i in matchs){
            if(~~matchs[i] > 255) return sRGB
            re += ('0' + (~~matchs[i]).toString(16)).slice(-2)
        }
        return re
    }
    return sRGB
}

发表于 2017-04-02 17:50:15 回复(0)
JavaScript
路人1头像 路人1 
function rgb2hex(sRGB) {
    var res='#';
    var flag=true;
    var ary=sRGB.match(/^rgb\((0|[1-9]\d+),\s*(0|[1-9]\d+),\s*(0|[1-9]\d+)\)$/);
    
    if(!ary)return sRGB;
    ary.slice(1).forEach(function(k){
        if(flag){
            flag=k>-1&&k<256;
            res+=('0'+(+k).toString(16)).slice(-2);
        }
    });
    return flag?res.toLowerCase():sRGB;
}

发表于 2017-03-29 17:13:08 回复(0)
JavaScript
Polly_dan头像 Polly_dan 
在最开始的时候有两种情况没考虑到：
1、小于16的情况，如果小于16，那么转换成十六进制只有一位字母，和题目中的6位小写字母就有出入；
2、不符合格式的rgb。
结果就导致通过率不达标，所以最终参照下网友的代码做了略微的调整。
function rgb2hex(sRGB){
    var rgb = sRGB;
    var flag = /rgb\((\d+)\s*\,\s*(\d+)\s*\,\s*(\d+)\s*\)/.test(rgb);
    var num1,num2,num3;
    var str1,str2,str3;
    if(!flag){
        return rgb;
    }else{
        var num = rgb.split("(")[1].split(")")[0].split(",");
        var str = ["#"];
        for(var i=0;i<num.length;i++){
            var s = (parseInt(num[i])<16)?"0"+parseInt(num[i]).toString(16):parseInt(num[i]).toString(16);
            str.push(s);
        }
        return str.join("");
    }
}

编辑于 2016-08-25 21:40:28 回复(0)
提交观点

问题信息

Javascript
难度：
17条回答 15681浏览

热门推荐

通过挑战的用户

查看代码

相关试题

颜色字符串转换

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号