大家好，我是前端西瓜哥。

最近做圖形編輯器，有這么一個需求，在輸入框輸入顏色十六進制值（hex），自動轉為對應 6 位長度的 hex。

如果值不合法，回退為上次合法輸入。

我正在開發的圖形設計工具：

https://github.com/F-star/suika

線上體驗：

https://blog.fstars.wang/app/suika/

顏色 hex 規則

顏色 hex 的通用規則是：

• 字符的范圍需要為 0~9，a~f，A~F。
• 長度有要求，需要為 6 位字符串（ABCDEF）；也可以為 3 位，比如 ABC，它等價于 6 位的 AABBCC。

處理用戶輸入

但是用戶的輸入你是無法預測的，大概率是不符合這兩個規則。

簡單地判斷不符合規則讓用戶的輸入無效，然后回退，并不是很好的做法。

為了有更好的用戶體驗，我們要做一下優化。

當用戶輸入完內容，回車，我們對輸入字符串進行處理。

• 首先轉換大寫，這是為了統一格式和對比，其實和優化無關。你也可以轉小寫。
• 取出字符串中從左開始第一個匹配上面規則的子字符串，用正則表達式是最合適的，正則為：/[0-9A-F]{1,6}/，表示匹配第一個字符為 0~9 和 A~F 的長度為 1 到 6 的字符串。
• 如果沒匹配到，返回一個空字符串表示沒找到合法值，輸入框的內容會進行回退到上一次輸入的合法值。
• 如果匹配到，就會根據子字符串的長度執行不同的邏輯
• 長度為 6，剛好，直接返回它。
• 長度為 4 和 5，屬于是 “高不成低不就”，我們將其截斷為 3。（或者你可以給它末尾補 0 補滿到 6 位）
• 長度為 3，我們應用的規則是，從 ABC 轉換為 AABBCC，因為對應經典規則，前者是后者的縮寫。
• 長度為 2 或 1，則不斷地將自己添加到末尾，直到滿 6 位，比如：AB 會變成 AABBCC，A 會變成 AAAAAA。

這樣用戶輸入 #0，這個輸入本身不符合顏色 hex 規則，但我們理解用戶其實是想要一個純黑色。

通過上面的處理，我們會返回一個 000000，而不是簡單地認為用戶輸入不合法，將其丟掉。

代碼實現

const normalizeHex = (hex: string) => {
  // (1)轉大寫
  hex = hex.toUpperCase();
  // (2)找出其中的符合顏色 hex 規則的子字符串
  const match = hex.match(/[0-9A-F]{1,6}/);
  if (!match) {
    return '';
  }
  hex = match[0];

  if (hex.length === 6) {
    return hex;
  }
  if (hex.length === 4 || hex.length === 5) {
    hex = hex.slice(0, 3);
  }
  // ABC -> AABBCC
  if (hex.length === 3) {
    return hex
      .split('')
      .map((c) => c + c)
      .join('');
  }
  // AB -> ABABAB
  // A -> AAAAAA
  return hex.padEnd(6, hex);
};

符合經典規則（AABBCC 和 ABC）的情況：

找不到 hex 字符串的情況，會回退到上次的合法值

其他情況：