解析css措施

Question

當我編寫一個jQuery插件時，我喜歡指定CSS方式的間距選項。 我寫了一個函數，它返回一個CSS字符串作爲對象的值。

5px的10px的回報率最高：5像素，右：10px的，底部：5像素，左：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，「A號碼可以是一個整數，或它可以是零個或多個數字後跟一個句點（。），隨後一個或多個數字」，在正則表達式語言

\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'}; 
    }) 
}