javascript string regex (css validity check+conversion)

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

There are a few CSS parsers written in JS, not sure how robust they are at parsing numbers. Regex may be your best option.

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

If you use this regex to replace your data, you only need to tackle the ones with the missing prefix.

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

First, replace this with

${whole}${valid}

If the regex isn't matched, the 2nd part (|.*) will be matched (anything) and the match will be replaced with nothing.

You could also go a line by line aproach & remove that part, when there is no match, swap it out in javascript with ''.

Lastly, just do a quick replace using

^(?<justdigits>\d+)$

and replace with

${justdigits}px

So, in short: Lots of ways to go about this, up to you how to continue.

Interesting problem. Here is a tested solution which uses one regex and a switch statement:

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

Note that this function also works for fractional numbers having no integer portion, e.g. .2px.

Thought I would post the solution I'm using now. jus posted as answer to get the syntax coloring. The thing can be tested here: http://jsfiddle.net/385AY/2/

It's very lengthy, and some of the solutions here are much more compact.. but for anyone why may be able to use it, heres a version that is more accesible for beginners, and with comments..

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()