A CSS string – select everything up to third comma

Question

I'm writing a custom highlight animation with Scriptaculous that includes a CSS3 glow. I get the box-shadow style and need to split it at the rgba alpha value, then vary that value to get the shadow to fade.

$('fresh').style.MozBoxShadow

would return

0 0 20px rgba(163, 238, 71, 1.0)

1.0 is the alpha value. I need to split it so that I can set:

$('fresh').style.MozBoxShadow = everythingBeforeAlphaValue + anAlphaValueIVaryWithJS + ')';

All the numbers can be any number of digits long, so I can't use substring (and that's all I really know :) ). Can you help?

Answer 1

var mozBoxShadow = $('fresh').style.MozBoxShadow;
var everythingBeforeAlphaValue = /.*?rgba\((?:\d*,\s*){3}/.exec(mozBoxShadow)[0];

Answer 2

This would be better and cleaner done programmatically, without parsing a string.

If I understand the logic right, you should be able to reach the colour directly via

$('fresh').style.MozBoxShadowColor

That'll save you one part of it.

I'm also quite sure it is possible to access the "alpha" component of a colour programmatically, but I don't know how.

Answer 3

Well, you can still use substring, because you can know the lastIndexOf(','), for example:

var str = "0 0 20px rgba(163, 238, 71, 1.0)";

var everythingBeforeAlphaValue  = str.substring(0, str.lastIndexOf(',') + 1);
// "0 0 20px rgba(163, 238, 71,"
// ...