CSS text-shadow值RegEx

Question

我有以下RegEx来验证CSS text-shadow属性

的输入

/^(-?[0-9]+px\s?){2,3}(#[a-fA-F0-9]{6}|#[a-fA-F0-9]{3}|red|orange|black|white|purple|blue|red|yellow|green|brown|aqua|pink|teal)$/

对于像2px 2px #ff0000;

这样的简单案例，它的效果非常好

但它并不适用于多种值，例如

text-shadow : -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;

我如何＆＃34;延伸＆＃34;以前的RegEx支持每个text-shadow案例？

Answer 1

您可以使用以下RegEx

^(-?\d+px\s+-?\d+px(?:\s*\d+)?\s*#(?:\[a-zA-Z0-9\]{3}(?:\[a-zA-Z0-9\]{3})?|red|orange|black|white|purple|blue|red|yellow|green|brown|aqua|pink|teal)\s*\[,;\]\s*)*$

这是使用改变/ OR条件的另一个RegEx。 RegEx的第一部分与简单语法匹配，第二部分匹配每一侧的各个值。

^(-?\d+px\s+-?\d+px\s+#(\[a-fA-F0-9\]{3})(\[a-fA-F0-9\]{3})?;?)|(-?\d+px\s+-?\d+px\s+\d+\s+#(\[a-zA-Z0-9\]{3}(\[a-zA-Z0-9\]{3})?),?\s*){4};?

<强>解释

1. -?\d+px\s+-?\d+px\s+
   • -?：匹配连字符-
   • \d+：匹配一个或多个数字
   • px：匹配px文字
   • \s+：匹配一个或多个空格
2. #([a-fA-F0-9]{3})([a-fA-F0-9]{3})?
   • #：匹配哈希#
   • [a-fA-F0-9]{3}：匹配3个字符的十六进制
   • ([a-fA-F0-9]{3})?：可选地匹配3个字符的十六进制

MDN ^Syntax

中指定的另一种支持格式

^text-shadow:\s*(initial|unset|inherit|(-?\d+(px)?\s*){2,3}(#((\[a-f0-9\]{3}){1,2})|\[a-z-\]+)|(#((\[a-f0-9\]{3}){1,2})|\[a-z-\]+)\s*(-?\d+(px)?\s*){2,3});?$