javascript字符串正则表达式(css有效性检查+转换)

Question

给出一个字符串,如下列之一:

'2'
'2px'
'2%'
'2em'
'2foobar'
'foobar'

我想确定一下:

1)它是否是一个普通数字(2或2.2),如果它是圆形的(Math.floor())并且附加'px',那么,'2'或'2.2'变为'2px'

2)如果它不是普通数字,则确定它是否是有效的css值,即,如果它由一个数字(int或float)后跟'px','em'或'%'组成.我知道还有其他人,但我会支持这三个人.如果是,请离开它.

3)如果没有,看看字符串是否以数字开头(int ot float),将其四舍五入并追加'px'

4)如果没有,将其设置为空字符串

结果将是:

'2'     -> '2px'
'2.2'   -> '2px'

'2%'    -> '2%'
'2em'   -> '2em'

'2foo' -> '2px'

'foo'  -> ''

是否可以以紧凑的方式(可能使用正则表达式),或使用现有的css验证器库进行JS？

Answer 1

以下是正则表达式的方法:

var input = '2.7em', output = parseInt(input, 10) + (input.match(/px|%|em/) || 'px')

编辑:

var input = '2.7foo'
, number = parseInt(input, 10)
, output = (isNaN(number)) ? '': number + (input.match(/px|%|em/) || 'px');

编辑2:允许使用em和%浮动:

var inp='3.5em'
, n=parseFloat(inp), p=inp.match(/%|em/)
, output = (isNaN(n)) ? '': (p)?n+p:Math.round(n)+'px';