구문 분석 CSS 대책

Question

jQuery 플러그인을 작성할 때 CSS 간격에 대한 옵션을 지정하고 싶습니다. 객체의 값으로 CSS 문자열을 반환하는 함수를 작성했습니다.

5px 10px 반환 상단 : 5px 오른쪽 : 10px, 하단 : 5px은, 왼쪽 : 10px

지금 나는 종종 약간의 계산 등을 할 반환 된 값을 사용하여 매우 좋지 않아 모든 측정 단위를 추출해야합니다 시간 ... 나는 누군가가 나에게이 기능을 완료하는 데 도움 수있는 정규 표현식을 서면으로 빨아

:

어떻게이 기능을 개선하는 방법 나는 당신의 의견에 열려입니다 어떤 생각이있는 경우

this.cssMeasure = function(cssString, separateUnits){ 

    if (cssString){ 
     var values = {} 
    }else{ 
     return errorMsg 
    } 

    var spacing = cssString.split(' ') 
    var errorMsg = 'please format your css values correctly dude' 

    if(spacing[4]) { 
     return errorMsg 
    } else if (spacing[3]) { 
     values = {top: spacing[0], right:spacing[1], bottom:spacing[2], left:spacing[3]} 
    } else if (spacing[2]) { 
     values = {top: spacing[0], right:spacing[1], bottom:spacing[2], left:spacing[1]} 
    } else if (spacing[1]) { 
     values = {top: spacing[0], right:spacing[1], bottom:spacing[0], left:spacing[1]} 
    } else { 
     values = {top: spacing[0], right:spacing[0], bottom:spacing[0], left:spacing[0]} 
    } 

    if (separateUnits) { 
     $.each(values, function(i, value){ 
      /* 
      at this place i need to extract the measuring unit of each value and return them separately 
      something like top: {value: 10, unit: 'px'}, right: {bla} and so on 
      */ 
     }) 
    } 

    return values 

} 

.

Answer 1

http://www.w3.org/TR/css3-values/#ltnumbergt에 따르면, "다수의 하나의 정수일 수 있고, 또는 하나 개 이상의 숫자 뒤에 도트 (.) 뒤에 0 이상의 숫자 일 수있다"정규 표현식 언어,

\d+|\d*\.\d+ 

의 그것에 선택적 부호를 추가하고 그룹 "비 캡처는"할 수 있도록하자 때문에 장치가 어떤 순서가 될 지루하게 모든 가능한 장치를 열거 간단

([+-]?(?:\d+|\d*\.\d+)) 

를 구문 분석 소문자 (없음 포함하지 않음) 문자 또는 퍼센트 기호의

([a-z]*|%) 

는

propRe = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/ 

당신이

parts = "+12.34em".match(propRe) 

숫자 값이 될 것 값으로 적용하면, 모두 함께 퍼팅 부품 [1]과 부품 단위 [2]

Answer 2

switch (spacing.length) { 
case 1: 
    values = {top: spacing[0], right:spacing[0], bottom:spacing[0], left:spacing[0]}; 
    break; 
case 2: 
    values = {top: spacing[0], right:spacing[1], bottom:spacing[0], left:spacing[1]}; 
    break; 
case 3: 
    values = {top: spacing[0], right:spacing[1], bottom:spacing[2], left:spacing[1]}; 
    break; 
case 4: 
    values = {top: spacing[0], right:spacing[1], bottom:spacing[2], left:spacing[3]}; 
    break; 
default: 
    return errorMsg; 
} 

if (separateUnits) { 
    values = $.map(values, function(i, value){ 
     matches = value.match(/([-+]?[\d.]*)(.*)/); 
     return {value: matches[1]+0, 
       unit: matches[2] ? matches[2] : 'px'}; 
    }) 
}