解析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，“数字可以是整数，也可以是零个或多个数字，后跟一个点 (.)，然后是一个或多个数字”，用正则表达式语言

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

让我们为其添加一个可选符号，并使组“非捕获”以使解析更简单

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

枚举所有可能的单位是乏味的，因此让单位是任何小写字母序列（包括无）或百分号

([a-z]*|%)

把这一切放在一起，

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

当您将此应用于值时

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

数值将在parts[1]中，单位在parts[2]中