rgb(a)和16進制相互轉換，rgbaToHex, hexToRgb.

最近工作有遇到，就記錄一下。

其實在寫正則表達式的時候，我認爲表達清楚是最重要的，簡潔反而是其次的。

/*
  rgba(100, 200, 80, 0.7);
*/

function rgbaToHex (rgba) {
  rgba = rgba.replace(/\s+/g, "");  // 先剪除字符中的空格，避免寫正則時加入過多的\s*; 但是r  g  b(10, 2  0, 30) 也會判定爲正確的表示顏色字符串。實際使用中也不會出現這種。
  let pattern = /^rgba?\((\d+),(\d+),(\d+),?(\d*\.\d+)?\)$/,
   result =  pattern.exec(rgba);
  if(!result) {
    throw new Error(`傳入的${rgba}格式不正確`);
  }

  /* r:result[1], g:result[2], b:result[3], a: result[4] */
  let colors = [];
  for(var i=1, len=3; i<=len; ++i) {
    let str = Number(result[i]).toString(16);
    if(str.length == 1) {
      str = 0 + str;
    }
    colors.push(str);
  }

  return {
    color: "#" + colors.join(""),
    opacity: result[4] ? result[4] : "1",
  };
}

/*
  輸出如下
  {color: "#010203", opacity: "1"}
  {color: "#64c850", opacity: "0.7"}
  {color: "#64c850", opacity: "1"}
*/

接下來，我們寫一下16進制轉rgb

function hexToRgb(hex) {
  /*
    hex: {String}, "#333", "#AF0382"
  */
  hex = hex.slice(1);
  if(hex.length == 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }

  return {
    r: Number.parseInt(hex.slice(0, 2), 16),
    g: Number.parseInt(hex.slice(2, 4), 16),
    b: Number.parseInt(hex.slice(4, 6), 16),
  }
}

console.log(hexToRgb("#555"));
console.log(hexToRgb("#AF3823"));

/*
  輸出如下
  {r: 85, g: 85, b: 85}
  {r: 175, g: 56, b: 35}
*/