CODEWITHSUNDEEP
javascriptcssregex
SakerONE
SakerONE

Reputation: 139

regular expression with css properties

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?

Upvotes: 0

Views: 265

Answers (3)

kennebec
kennebec

Reputation: 104760

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
*/

Upvotes: 0

Ilya I
Ilya I

Reputation: 1282

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)

Upvotes: 0

webnesto
webnesto

Reputation: 1319

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
}

Upvotes: 1

Related Questions