图形编辑器开发：颜色 Hex 标准化

作者：前端西瓜哥 2023-08-28 08:10:50开发 后端 颜色 Hex 的图形通用规则是：字符的范围需要为 0~9，a~f，编辑标准A~F。器开长度有要求，发颜需要为 6 位字符串（ABCDEF）；也可以为 3 位，图形比如 ABC，编辑标准它等价于 6 位的器开 AABBCC。

大家好，发颜我是图形前端西瓜哥。

最近做图形编辑器，编辑标准有这么一个需求，器开在输入框输入颜色十六进制值（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 字符串的情况，会回退到上次的合法值

其他情况：

责任编辑：姜华 来源： 前端西瓜哥 Hex图形编辑器

(责任编辑：知识)