Regexp匹配十六进制颜色语法(和缩写形式）

Regexp Matching Hex Color Syntax (and Shorten form)

本文关键字：缩写 语法 十六进制 颜色 Regexp      更新时间：2023-09-26

好吧，我对regex，尤其是JavaScript regexp很陌生。

我正在寻找一个匹配十六进制颜色语法的正则表达式（如#34ffa6）然后我查看了w3school页面：Javascript RegExp Object

那就是我的正则表达式：

/^#[0-9a-f]{6}/i

它似乎有效，但是，如果我希望它也与"；短十六进制颜色语法"；类型（像#3fa），有可能吗？我试过使用字符|，但可能语法有问题。

/^#[0-9a-f]{3,6}$/i

将匹配#abc、#abcd、#abcde、#abcdef

/^#([0-9a-f]{3}|[0-9a-f]{6})$/i

将匹配#abc和#abcdef，但不匹配#abcd

/^#([0-9a-f]{3}){1,2}$/i

将匹配#abc和#abcdef，但不匹配#abcd

/^#(?:[0-9a-f]{3}){1,2}$/i

将匹配#abc和#abcdef，但不匹配#abcd

看看RegExp-MDN，了解更多关于javascript中正则表达式的信息。

试试这个：

/^#([0-9a-f]{6}|[0-9a-f]{3})$/i

[0-9a-f]{6}=6个字符[0-9a-f]{3}=3个字符$=结束

这应该可以工作/#[0-9a-f]{6}|#[0-9a-f]{3}/gi

为了快速地尝试正则表达式并学习它，你可以使用这个网站http://gskinner.com/RegExr/

您可能希望为#RGBA和#RRGGBBAA合并4位和8位十六进制。我在不同的设置中使用match()和split()来生成数组。我无法获得@rodneyrehm发布的所有变体来处理g标志和匹配，但如果我按从高到低的顺序列出字符数，则第一个（也是最详细的）解决方案可以工作：8、6、4、3。

let rx  = /(?:#)[0-9a-f]{8}|(?:#)[0-9a-f]{6}|(?:#)[0-9a-f]{4}|(?:#)[0-9a-f]{3}/ig
let s   = "123 #AA22CC 100% #12F abc #A2Cd #aa11cc44 test 236px";
let arr = s.match(rx); // arr == ["#AA22CC", "#12F", "#A2Cd", "#aa11cc44"]

MDN文档说(?:#)应该忘记"#"，但它没有，(?=#)只是失败了。我误解了什么
我的最终目标是在从match()返回的数组中包括其他数值。我快到了。。。

可能的十六进制颜色为-

格式示例
#RGB#F00
#RGBA#F005
#RRGGBB#FF7C00
#RRGGBBAA#FF7C0016
相关文章：