大家好,我是前端西瓜哥。
最近做图形编辑器,有这么一个需求,在输入框输入颜色十六进制值(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 字符串的情况,会回退到上次的合法值
其他情况: