点击上方 三分钟学前端，关注公众号
回复交流，加入前端编程面试算法每日一题群
面试官也在看的前端面试资料
仔细观察本题，本题可分为三个步骤：
从
rgb(255, 255, 255)中提取出r=255、g=255、b=255将
r、g、b转换为十六进制，不足两位则补零组合
#
提取 r、g、b
方式一：利用 match() 方法
利用 match() 方法，读取出 r 、 g 、 b
1
2
3
4
5
6
7
8
9
10
11
12function rgb2hex(sRGB) { const reg = /^(rgb|RGB)(s*(d{1,3})s*,s*(d{1,3}s*),s*(d{1,3})s*)$/ const rbg = sRGB.match(reg) return rbg } // 测试 rgb2hex('rgb(255, 255, 255)') // ["rgb(255, 255, 255)", "rgb", "255", "255", "255", index: 0, input: "rgb(255, 255, 255)", groups: undefined] rgb2hex('rgb(16, 10, 255)') // ["rgb(16, 10, 255)", "rgb", "16", "10", "255", index: 0, input: "rgb(16, 10, 255)", groups: undefined]
r = rgb[2] 、 g = rgb[3] 、 b = rgb[4]
方式二：利用 match() 方法（2）
rgb(255, 255, 255) 中 r 、 g 、 b 分别为连续的数字，所以我们可以利用正则 /d+/g 获取取所有连着的数字
1
2
3
4
5
6
7
8
9
10
11function rgb2hex(sRGB) { const rgb = sRGB.match(/d+/g); return rgb } // 测试 rgb2hex('rgb(255, 255, 255)') // ["255", "255", "255"] rgb2hex('rgb(16, 10, 255)') // ["16", "10", "255"]
方式三：利用 replace + split
观察 rgb(255, 255, 255) 的每一个色值是透过 , 连接一起的，所以我们考虑是否能通过 split(',') 拆分出每一个色值，主要考虑两步
替换
rgb(255, 255, 255)的部分字符（rgb、(、)）为''拆分出每一个色值
1
2
3
4
5
6
7
8
9
10function rgb2hex(sRGB) { const rgb = sRGB.replace(/(?:(|)|rgb|RGB)*/g, '').split(',') return rgb } // 测试 rgb2hex('rgb(255, 255, 255)') // ["255", " 255", " 255"] rgb2hex('rgb(16, 10, 255)') // ["16", " 10", " 255"]
转换为十六进制，不足补零
转换为十六进制，可采用：
(+n).toString(16)或Number(n).toString(16)`
不足两位则补零：
('0' + r16).slice(-2)r16.padStart(2, '0')(r < 16? '0':'') + r16r16.length < 2 ? '0' + r16 : r16((1 << 24) + (Number(r) << 16) + (Number(g) << 8) + Number(b)).toString(16).slice(1)
方式多种多样，发散思维，????更多
组合 #
reduce
注意，输出为可为大写（ #FFFFFF ）或小写字符（ #ffffff ），本题为大写
1
2rgb.reduce((acc, cur) => acc + hex, '#').toUpperCase()
+
也可以通过 + 连接，按情况而定
方式多种多样，发散思维，????更多
总结
把本题拆分成以上三步，选取每步的一种实现方式组合实现本题，最终实现方案多种多样，简单这里列一下 其中的部分组合
组合一
1
2
3
4
5
6
7
8
9
10
11
12
13
14function rgb2hex(sRGB) { var rgb = sRGB.replace(/(?:(|)|rgb|RGB)*/g, '').split(',') return rgb.reduce((acc, cur) => { var hex = (cur < 16? '0':'') + Number(cur).toString(16) return acc + hex }, '#').toUpperCase() } // 测试 rgb2hex('rgb(255, 255, 255)') // "#FFFFFF" rgb2hex('rgb(16, 10, 255)') // "#100AFF"
组合二
1
2
3
4
5
6
7
8
9
10
11
12
13
14function rgb2hex(rgb) { const rgb = rgb.match(/d+/g); const hex = (n) => { return ("0" + Number(n).toString(16)).slice(-2); } return rgb.reduce((acc, cur) => acc + hex, '#').toUpperCase() } // 测试 rgb2hex('rgb(255, 255, 255)') // "#FFFFFF" rgb2hex('rgb(16, 10, 255)') // "#100AFF"
组合三
1
2
3
4
5
6
7
8
9
10
11function rgb2hex(sRGB) { const rgb = sRGB.replace(/(?:(|)|rgb|RGB)*/g, '').split(',') return "#" + ((1 << 24) + (Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16).slice(1).toUpperCase()} // 测试 rgb2hex('rgb(255, 255, 255)') // "#FFFFFF" rgb2hex('rgb(16, 10, 255)') // "#100AFF" rgb2hex('rgb(1, 2, 3)') // "#010203"
来自：https://github.com/sisterAn/blog
最后
欢迎关注「三分钟学前端」，回复「交流」自动加入前端三分钟进阶群，每日一道编程算法面试题（含解答），助力你成为更优秀的前端开发！
》》面试官也在看的前端面试资料《《
“在看和转发”就是最大的支持
最后
以上就是无心发带最近收集整理的关于面试官问：颜色转换 'rgb(255, 255, 255)' -> '#FFFFFF' 的多种思路的全部内容，更多相关面试官问：颜色转换内容请搜索靠谱客的其他文章。
发表评论 取消回复