正则表达式匹配十六进制颜色语法（和缩短形式）答案

【问题标题】：Regexp Matching Hex Color Syntax (and Shorten form)正则表达式匹配十六进制颜色语法（和缩短形式）
【发布时间】：2023-03-28 07:17:01
【问题描述】：

好吧，我对正则表达式非常陌生，尤其是 JavaScript 正则表达式。

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

那就是我的正则表达式：

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

它似乎有效，但是，如果我希望它也匹配“短十六进制颜色语法”形式？（比如#3fa），有可能吗？我试过使用字符|，但也许我的语法有误。

【问题讨论】：

标签： javascript regex

【解决方案1】：

/^#[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 中正则表达式的更多信息。

【讨论】：

+1，即将发布您的最终示例。不过，我会切换到非捕获括号 (?:)。
@AndyE 非捕获会提高性能吗？或者只是很高兴！
@ManseUK：是的，尽管在大多数情况下差异可以忽略不计，但这只是一种“最佳实践”，让自己养成仅在实际需要捕获子表达式时才使用捕获括号的习惯。
大写字母也可以，所以RegExp应该是/^#(?:[0-9a-fA-F]{3}){1,2}$/i
@xcatliu 被 i 标志覆盖，它使表达式不区分大小写

【解决方案2】：

试试这个：

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

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

【讨论】：

【解决方案3】：

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

为了即时尝试正则表达式并学习它，您可以使用此站点 http://gskinner.com/RegExr/

【讨论】：

【解决方案4】：

您可能希望为#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() 返回的数组中包含其他数值。我快到了……

【讨论】：