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) + (input.match(/px|%|em/) || 'px')

编辑：

var input = '2.7foo'
, number = parseInt(input)
, 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';

Answer 2

var input  = '2foo';
var output = '';
var tmp;

tmp = parseInt( input.replace(/^[^1-9]*/, '') );
if ( tmp != 'NaN' ) {
  if ( tmp + '%' == input ) {
    output = tmp + '%';
  } else if ( tmp + 'em' == input ) {
    output = tmp + 'em';
  } else {
    output = tmp + 'px';
  }
}

Answer 3

有一些用JS编写的CSS解析器，不确定它们在解析数字时有多强大。正则表达式可能是您的最佳选择。

https://github.com/stubbornella/parser-lib

Answer 4

如果您使用此正则表达式替换您的数据，您只需要处理缺少前缀的那些。

^((?<whole>\d+)(\.\d+){0,1}(?<valid>px|em|pt|%){0,1}.*|.*)$

首先，将其替换为

${whole}${valid}

如果正则表达式不匹配，第二部分（|。*）将匹配（任何），匹配将被替换为空。

你也可以逐行接近＆amp;删除该部分，当没有匹配时，在javascript中将其与''。

交换

最后，只需使用

进行快速替换

^(?<justdigits>\d+)$

并替换为

${justdigits}px

所以，简而言之：有很多方法可以解决这个问题，取决于你如何继续。

Answer 5

有趣的问题。这是一个经过测试的解决方案，它使用一个正则表达式和一个switch语句：

function clean_css_value(text) {
    var re = /^(\d+(?:\.\d*)?|\.\d+)([^\d\s]+)?$/m;
    // Case 0: String does not match pattern at all.
    if (!(m = text.match(re))) return '';
    // Case 1: No number at all? return '';
    if (!m[1]) return '';
    var i = Math.floor(m[1]); // Compute integer portion.
    // Case 2: Nothing after number? return integer pixels
    if (!m[2]) return i + 'px';
    switch (m[2]) {
    case 'em':
    case '%':
        return m[1] + m[2];
    case 'px':
    default:
        return i + 'px';
    }
}

请注意，此函数也适用于没有整数部分的小数，例如.2px。

Answer 6

以为我会发布我现在正在使用的解决方案。 jus发布的答案是获取语法着色。这件事可以在这里测试：http://jsfiddle.net/385AY/2/

这是非常冗长的，这里的一些解决方案要紧凑得多......但是对于任何人来说，为什么可以使用它，这是一个更适合初学者和版本的版本..

function css_value_validate(input) {

    // first get rid of any whitespace at beginning or end of sting
    input = $.trim(input);

    // now catch any keywords that should be allowed
    // this could be expanded for lots of keyword 
    // by holding allowed words in an object and 
    // checking against them
    if (input == 'auto') {
        return input;
    }

    // now get rid of anything that may precede the first occurence of a number or a dot 
    input = input.replace(/^[^0-9\.]*/, '');

    // add a leading zero if the input starts with a . and then a number
    input = input.replace(/(^\.[0-9]*)/, "0$1");

    var output = '';
    var numeric;

    // check of the input is a straight zero or an empty string and 
    if (input + '' === '0' || input + '' === '') {
        return input;
    }

    // get the raw numeric by parsing to float
    numeric = parseFloat(input);
    if (numeric != 'NaN') {
        if (numeric + '%' === input) {
            output = numeric + '%';
        } else if (numeric + 'em' === input) {
            output = numeric + 'em';
        } else {
            // if converted to pixels strip any decimals.
            // the 2nd parameter, 10, is the radix making sure we parse in decimal
            output = parseInt(numeric, 10);
            output = (output > 0) ? output + unit : output;
        }
    }

    return output;
} // END cssvalidate()

Answer 7

当然，你要求一个正则表达式...无论如何，通过将值解析为int或float并且从原始值中减去它也是可能的。

var input = '2.2px';
var value = parseInt(input) // => 2
var unit = input.split(value)[1] // => 'px'

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

7 个答案: