javascript - 根据放置正则表达式区分相似值

Question

这是我的问题:我正在研究一系列正则表达式来剖析字体属性的速记 css 代码。这是我目前所拥有的:

var style = decl.val.match(/\s*(?:\s*(normal|italic|oblique)){1}/i); style = style ? style[1] : "";
var variant = decl.val.match(/\s*(?:\s*(normal|small-caps))/i); variant = variant ? variant[1] : "";
var weight = decl.val.match(/\s*((?:\s*(?:normal|bold|bolder|lighter|\d+(?:\%|in|cm|mm|em|rem|ex|pt|pc|px))){1})/i); weight = weight ? weight[1] : "";
var size = decl.val.match(/\/\s*((?:\s*(?:xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|\d+(?:\%|in|cm|mm|em|rem|ex|pt|pc|px))){1,2})/i); size = size ? size[1] : "";
var height = decl.val.match(/\s*(?:\s*(normal|inherit|\d+(?:\%|in|cm|mm|em|rem|ex|pt|pc|px))){1}/i); height = height ? height[1] : "";
var family = decl.val.match(/\s*(?:\s*([a-zA-Z\-\,\'\"\s]+))(?:,|;)/i); family = family ? family[1] : "";
var values = decl.val.match(/\s*(?:\s*(caption|icon|menu|message-box|small-caption|status-bar)){1}/i); values = values ? values[1] : "";

一切都按照我想要的方式工作，除非我尝试使用以下字符串:

font: normal small-caps 120%/120% fantasy, sans-serif;

这会导致样式、变体、重量和高度的值都设置为正常:

style --> "normal"
variant --> "normal"
weight --> "normal"
height --> "normal"

这是因为正则表达式在每种情况下都匹配第一个实例，并且不会检查以确保不存在它应该采用的其他值。应该是:

style --> "normal"
variant --> "small-caps"
weight --> "120%"
height --> 

我希望这是有道理的。如有任何疑问，请随时发表评论。感谢您的帮助!

Answer 1

重量和尺寸之间的正斜线有点问题。
但是你最好结合成一个正则表达式来制作除
之外的所有内容 anchor 可选。这会将事情排好，你不会以“正常”结束
在大多数变量上。

编辑 根据这个引用http://www.w3schools.com/cssref/pr_font_font.asp
这就是他们解析 CSS 字体速记属性的方式。

edit2 将硬空格定界符调整到可选部分之后和必填部分之间。

 #  /(?:(?:(normal|italic|oblique|initial|inherit)\s+)?(?:(normal|small-caps|initial|inherit)\s+)?(?:((?:normal|bold|bolder|lighter|initial|inherit|\d+))\s+)?(?:(smaller|small|x-small|xx-small|medium|larger|large|x-large|xx-large|initial|inherit|\d+(?:\%|in|cm|mm|em|rem|ex|pt|pc|px))(?:\/(normal|initial|inherit|\d+(?:\%|in|cm|mm|em|rem|ex|pt|pc|px)))?\s+)(?:(initial|inherit|(?:"[^"]*"|'[^']*'|[a-zA-Z-]+)(?:\s*,\s*(?:"[^"]*"|'[^']*'|[a-zA-Z-]+))*))|(caption|icon|menu|message-box|small-caption|status-bar|initial|inherit))/

 ####  CSS - Font Shorthand Property  
 ####  Reference:  http://www.w3schools.com/cssref/pr_font_font.asp    
 #### --------------------------------
 #### font:     

 (?:
      #### User Defined Fonts
      #### ------------------

      ##### Style (optional)
      (?:
           (                        # (1 start), Style
                normal
             |  italic
             |  oblique
             |  initial
             |  inherit 
           )                        # (1 end)
           \s+   # delimiter
      )?

      ##### Variant (optional)
      (?:
           (                        # (2 start), Variant
                normal
             |  small-caps
             |  initial
             |  inherit 
           )                        # (2 end)
           \s+   # delimiter
      )?

      ##### Weight (optional)
      (?:
           (                        # (3 start), Weight
                (?:
                     normal
                  |  bold
                  |  bolder
                  |  lighter
                  |  initial
                  |  inherit 
                  |  \d+ 
                )
           )                        # (3 end)
           \s+   # delimiter
      )?

      ##### Size (required)
      (?:
           (                        # (4 start), Size
                smaller
             |  small
             |  x-small
             |  xx-small
             |  medium
             |  larger
             |  large
             |  x-large
             |  xx-large
             |  initial
             |  inherit
             |  \d+ 
                (?: \% | in | cm | mm | em | rem | ex | pt | pc | px )
           )                        # (4 end)

           #####  Line Height (optional)
           (?:
                /                   # Separator
                (                   # (5 start), Line height
                     normal
                  |  initial
                  |  inherit
                  |  \d+ 
                     (?: \% | in | cm | mm | em | rem | ex | pt | pc | px )
                )                   # (5 end)

           )?

           \s+   # delimiter 
      )

      ##### Family (required)
      (?:
           (                        # (6 start), Family
                initial
             |  inherit
             |  (?: " [^"]* " | ' [^']* ' | [a-zA-Z-]+ )
                (?:
                     \s* , \s* 
                     (?: " [^"]* " | ' [^']* ' | [a-zA-Z-]+ )
                )*
           )                        # (6 end)
      )

   |  

      #### OR, 
      #### Use the Fonts used by these OS elements
      #### ------------------

      #### Values (required, if used)
      (                             # (7 start), Use values
           caption
        |  icon
        |  menu
        |  message-box
        |  small-caption
        |  status-bar
        |  initial
        |  inherit
      )                             # (7 end)
 )

Perl 测试用例

$str = 'font:normal small-caps 120%/120% "Times New Roman", sans-serif;';

if ( $str =~ /(?:(?:(normal|italic|oblique|initial|inherit)\s+)?(?:(normal|small-caps|initial|inherit)\s+)?(?:((?:normal|bold|bolder|lighter|initial|inherit|\d+))\s+)?(?:(smaller|small|x-small|xx-small|medium|larger|large|x-large|xx-large|initial|inherit|\d+(?:\%|in|cm|mm|em|rem|ex|pt|pc|px))(?:\/(normal|initial|inherit|\d+(?:\%|in|cm|mm|em|rem|ex|pt|pc|px)))?\s+)(?:(initial|inherit|(?:"[^"]*"|'[^']*'|[a-zA-Z-]+)(?:\s*,\s*(?:"[^"]*"|'[^']*'|[a-zA-Z-]+))*))|(caption|icon|menu|message-box|small-caption|status-bar|initial|inherit))/)
{
    print "\nmatched  '$&'\n\n";
    print "style   = '$1'\n";
    print "variant = '$2'\n";
    print "weight  = '$3'\n";
    print "size    = '$4'\n";
    print "height  = '$5'\n";
    print "family  = '$6'\n";
    print "values  = '$7'\n";
}

输出>>

matched  'normal small-caps 120%/120% "Times New Roman", sans-serif'

style   = 'normal'
variant = 'small-caps'
weight  = ''
size    = '120%'
height  = '120%'
family  = '"Times New Roman", sans-serif'
values  = ''