javascript - 解析 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]中