regular expression with css properties

Question

I have string with css properties and their values:

str = "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
 background: -webkit-linear-gradient(top, black, white);
 animation-duration: 12s;";

and I want to my match returned only properties

properties = text.match(/[^;:]*:/g); 

but it also returns "progid:", how can I avoid it?

• Esailija: What are you trying to do? Depending on that, it might be better to use a CSS parser or just query an elements set style properties..

Answer 1

Search for the beginning of the line or a ";" as well (or possibly a line-break/tab depending on your string formatting):

/(^|;)[^:;]*:/

You still have to cleanup your results a bit though.

Alternatively, you could split the string on ";" first, then split each bit on ":" and grab the 0th member of each for your properties:

var str = "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');background: -webkit-linear-gradient(top, black, white);animation-duration: 12s;";
var rules = str.split(";")
var i, l = rules.length;
var properties = [];
for( i = 0; i < l; i++ ){
 properties.push( rules[ i ].split(":")[0] ); //dangerous if you're not sure you'll always have a result
}

Answer 2

Please try

properties = text.match(/^[^;:]*:/g); 

EDIT: Here is a better solution provided there is always a space between property and value:

properties = text.match(/[^ ;:]+(?=: )/g)

• webnesto: That only works if each line has an actual line return at it's end. Not certain that was the case since there is no "\" preceding the breaks.

Answer 3

To avoid the empty rule when you split on a semi that ends the string,

split on semis with content following them;

var rules= str.split(/;(?=\S+)/);
for(var i= 0, L= rules.length; i<L; i++){
 rules[i]= rules[i].split(':')[0]; 
}
/* 
alert(rules)>>(Array)
filter, background, animation-duration
*/