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'  -> ''

是否有可能以一种紧凑的方式(可能使用正则表达式)或通过使用现有的 JS CSS 验证器库来做到这一点？

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 和 % float :

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