배치 정규 표현식을 기반으로 비슷한 값을 구별

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

당신이 할 수있는 것은 다음

당신은 하나 개의 속성을 발견

는 문자열에서이 속성을 제거합니다. 그런 다음 수정 된 문자열에서 다음 속성을 검색하십시오. 이것에 대한

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

무게와 크기 사이에 슬래시가 약간 문제가 있습니다.
하지만 모든 것을 만드는 하나의 정규식으로 결합하는 것이 더 좋을 것입니다 만
앵커는 선택 사항입니다. 이것은 일을 나열하고 대부분의 vars에서 '정상'
으로 끝나지 않을 것입니다. 그들은 CSS 폰트 약식 속성을 구문 분석하는 방법을

편집이 참조 http://www.w3schools.com/cssref/pr_font_font.asp
에 따르면입니다.

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) 
) 

펄 테스트 케이스

$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 = ''