Question

当我写一个jQuery插件时，我喜欢用CSS方式指定间距选项。我写了一个函数，它返回一个CSS String作为对象中的值。

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)

数值将在[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'};
    })
}

解析css措施

2 个答案: