I'm rubbish at Regular Expressions, really!

What I'd like is to split a string containing a CSS property value into an array of [string,value,unit].

For example: if I supplied the .split() method with 1px it'd return ["1px",1,"px"]. If I were to supply, similarly, 10% it'd return ["10%",10,"%"].

Can this be done?

I appreciate all your help!

Update: I'd also like it to return ["1.5em",1.5,"em"] if 1.5em were supplied. But, if possible, still return null if supplied yellow. Unfortunately /^([0-9]*\.?[0-9]*)(.*)/ supplied with yellow would return y,,y!

Thanks so far guys!

I'm rubbish at Regular Expressions, really!

What I'd like is to split a string containing a CSS property value into an array of [string,value,unit].

For example: if I supplied the .split() method with 1px it'd return ["1px",1,"px"]. If I were to supply, similarly, 10% it'd return ["10%",10,"%"].

Can this be done?

I appreciate all your help!

Update: I'd also like it to return ["1.5em",1.5,"em"] if 1.5em were supplied. But, if possible, still return null if supplied yellow. Unfortunately /^([0-9]*\.?[0-9]*)(.*)/ supplied with yellow would return y,,y!

Thanks so far guys!

• javascript
• regex
• split

Share Improve this question Follow edited May 19, 2010 at 22:01 Alan Moore 75.2k1313 gold badges107107 silver badges160160 bronze badges asked May 19, 2010 at 19:59 Jonathon OatesJonathon Oates 2,95244 gold badges3838 silver badges6060 bronze badges 1

• Please use backticks to format code, not <code> tags. Here's the complete Markdown reference: stackoverflow.com/editing-help – Alan Moore Commented May 19, 2010 at 22:18

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 10

"1px".match(/(\d*\.?\d*)(.*)/)

yields

["1px", "1", "px"]

---

I've updated the expression to match real numbers with leading and trailing decimals.

var expr  = /(\d*\.?\d*)(.*)/,
    cases = [
    "1px",
    "1.px",
    "11.px",
    "11.1px",
    "11.11px",
    "1.11px",
    ".11px",
    ".1px",
    ".px" // Invalid numeric value, but still preserves unit and can be handled as seen below
];

for ( var i=0,l=cases.length; i<l; ++i ) {
    var r = cases[i].match(expr );
    console.log(r, parseFloat(r[1], 10) || 0);
}

Results

["1px", "1", "px"] 1
["1.px", "1.", "px"] 1
["11.px", "11.", "px"] 11
["11.1px", "11.1", "px"] 11.1
["11.11px", "11.11", "px"] 11.11
["1.11px", "1.11", "px"] 1.11
[".11px", ".11", "px"] 0.11
[".1px", ".1", "px"] 0.1
[".px", ".", "px"] 0

Using capturing groups:

var matches = "100%".match(/^(\d+(?:\.\d+)?)(.*)$/);

You're in luck. match returns an array with the full match on the first position, followed by each group.
split is probably wrong here, since you want to keep the full match. If you wanted to get ['100', '%'], for example, you could have done .split(/\b/).

Updated to enable fractions. Also, the use of both anchors will not match when the format isn't [number][unit], so null is returned.

Try:

cssProperty.match(/^([0-9]+\.?[0-9]*)(.*)/);

More complicated but will return parsed number and null for some garbage strings

String.prototype.unitSplit = function(parse){
    var retArr = this.toString().match(/^([\d]*\.?[\d]+)([^\d]*)$/);
    if(retArr && parse != undefined)
    {
        retArr[1] = (retArr[1].indexOf('.') >= 0)?parseFloat(retArr[1]):parseInt(retArr[1]);
    }
    return retArr;
}
/* Test cases */
"10px".unitSplit(); //["10px", "10", "px"]
"20%".unitSplit(true); //["20%", 20, "%"]
".8em".unitSplit(true); //[".8em", 0.8, "em"]
"127.0.0.1localhost".unitSplit(true); //null

function mySplit(str)
{
    var regex = /(\d*)([^\d]*)/;
    var t = "$1$2,$1,$2";
    return str.replace(regex,t).split(",");
}