JS处理十六进制颜色码转RGB颜色值格式

从去年10月开始，有幸接手到jQuery项目还需要兼容IE8，从此返璞归真，回归传统开发的编码规范，全var的声明和ES6语法/flex布局全无的限制，对于写业务代码的前端搬运工还是有一定的考验。

秉承着“Write less，do more”的宗旨，开启了与这“小快灵”library的半年相处模式。

从事前端数年，经常能见到color的十六进制（即hex）格式与rgb格式，如下：

只是一直没考虑两者之间的关联性。后来知道了十六进制区间，突发奇想封装一个函数处理一下两者间的转换。

按照rgb格式的逻辑来看，共有16777216种颜色，我们可以先声明hex的集合字符。

在hex格式下，除去首位”#”，只剩下6位编码，按照rgb(xxx,xxx,xxx)的格式，2个字符为一组，可分为三组；hex逢十六进一，使用转换工具可以得到如下结果：

现在可以大展拳脚了。
HTML部分

#<input type="text" maxlength="6" />  
<button onclick="getVal()">点击</button>

JS部分

var log = console.log;
var str = "0123456789abcdef"; // 定义十六进制集合字符
//   var hex = "#098fac";
var rArr = Array.from({ length: 3 }); // 声明rgb格式的数组
function hex2Rgb(hex) {
  // hex = hex.slice(1);
  for (var i = 0; i < 3; i++) {
    //   debugger;
    rArr[i] =
      16 * str.indexOf(hex[2 * i].toLowerCase()) +
      str.indexOf(hex[2 * i + 1].toLowerCase());
  }
  return "rgb(" + rArr.join(",") + ")";
}
 var ipt = document.getElementsByTagName("input");
function getVal() {
  if (ipt[0].value) {
    if (ipt[0].value.length === 6 && /[0-9a-f]/i.test(ipt[0].value))
      document.body.style.backgroundColor = hex2Rgb(ipt[0].value);
    else if (ipt[0].value.length < 6) {
      alert("请输入6位十六进制颜色码");
      return;
    }
  } else alert("请输入数字或者字母A至F");
}
------------------------------分割线------------------------------

知识点：
①document.getElementsByTagName获取到的是集合，类型为[object HTMLCollection]，所以取ipt[0].value；
②正则/xxx/i校验不用区分大小写；
③hex格式下字母大小写互不影响，在JS逻辑中可以使用.toLowerCase()，将其都转为小写，再去匹配str集合字符。

若各位看客老爷感兴趣的话，也可以封装rgb2Hex函数试试呢~~~

原创不易，做毛不易，撸码数年寥寥数语，初来掘金乍到，跬步之积，饮水思源，幸而能站在巨人的肩膀上，寻求可持续发展。

在此鸣谢：
RGB颜色值与十六进制颜色码转换工具https://www.tpyyes.com/tool/rgb.html
远程导师——慎独软件工作室http://simbajs.com/