Question

我正在尝试编写一个与以下YACC表达式匹配的正则表达式： [left | right] || [top | bottom]：

它应该匹配:(左或右）和OR（顶部或底部）。或者“|”很简单，但“||”我无法理解。此表达式是W3C定义的CSS渐变语法的一部分：

<linear-gradient> = linear-gradient(
    [ [ <angle> | to <side-or-corner> ] ,]? 
    <color-stop>[, <color-stop>]+
)

<side-or-corner> = [left | right] || [top | bottom]

编辑：给予：左上角匹配：左上方

给予：离开匹配：左：

给予：右下角匹配：右下角

给予：正确的20px 匹配：正确

希望这能更好地解释它。谢谢

Answer 1

/(left|right)|(top|bottom)|(left|right)\s(top|bottom)/

应该完成任务。您可以将其缩短为

/(left|right|top|bottom)|(left|right)\s(top|bottom)/

或

/(left|right)|((left|right)\s)?(top|bottom)/

Answer 2

如果我理解正确，您需要一侧（左/右/顶部/底部）或一角（左上角，右下角 ... ）。
这可以解决为：

/^((left|right|top|bottom)|((top|bottom)delimiter(left|right)))$/

当然，您可以颠倒边角表示法的边的顺序（将角输出为左上角而不是左上角）：

/^((left|right|top|bottom)|((left|right)delimiter(top|bottom)))$/

请注意，分隔符是您想要的分隔符（可以是空格或减号）希望这有帮助！

P.S。：我在推特上听到你的求助电话：P。

<强>更新
根据您的编辑，我认为现在我了解您的需求：

/^((left|right|top|bottom)|((left|right|(-?\d*(\.\d+)?(px|em|\%)))\s+(top|bottom|(-?\d*(\.\d+)?(px|em|\%)))))$/

这个正则表达式现在匹配一个边（左/上/右/下）或左边和左边定义的两边。最高值，可以是方向关键字（左/上/右/下）或实际值（例如100px或1.4em）。
值正则表达式（-?\d*(\.\d+)?(px|em|\%)）匹配任何浮动数字（即使没有第一个零：.123而不是0.123），后跟一个度量单位（这里您可以提供完整的单位列表））

这是我通过的一些（javascript）测试：

var pattern = /^((left|right|top|bottom)|((left|right|(-?\d*(\.\d+)?(px|em|\%)))\s+(top|bottom|(-?\d*(\.\d+)?(px|em|\%)))))$/;
pattern.test('left bottom');   // true
pattern.test('-10px top');     // true
pattern.test('-.23em 140%');   // true

最终更新

取消了开始＆amp;结束人物
切换侧面和角落图案的顺序，优先考虑角落图案以匹配第一个

正则表达式“AND OR”表示[left |对] || [顶部|底部]

2 个答案: