區分基於位置正則表達式的類似值

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" 

這是因爲正則表達式的每種情況下的第一個實例相匹配，並且不檢查，以確保沒有它應該TAK一些其他的價值即它應該是：

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

我希望這是有道理的。如果您有任何問題，請隨時發表評論。感謝您的幫助！

Answer 1

你可以做的是：

當你找到一個屬性，從字符串中刪除此屬性。然後搜索修改字符串中的下一個屬性。

這是字符串中的第一個屬性的例子：

var str = decl.val; 

function removeFromString(str, result) { 
    console.log(result); 
    return str.slice(0, result.index) + str.slice(result.index + result[0].length); 
} 

var style = str.match(/\s*(?:\s*(normal|italic|oblique)){1}/i); 
if(style) { 
    str = removeFromString(str, style); 
} 
style = style ? style[1] : ""; 

我已經做了一個jsFiddle這一點。

Answer 2

重量和尺寸之間存在正斜槓的小問題。
但你會更好地結合成一個正則表達式，但除了
錨點可選。這將排列整齊，你不會在大多數變數上都會出現'正常'
。

編輯根據這個參考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 = ''