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?

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.. — Esailija
– Esailija, Commented Apr 14, 2012 at 15:17

webnesto · Accepted Answer · 2012-04-14 15:28:31Z

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
}

answered Apr 14, 2012 at 15:28

webnesto

1,3188 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ilya I · Accepted Answer · 2012-04-14 15:47:09Z

0

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)

edited Apr 14, 2012 at 15:47

answered Apr 14, 2012 at 15:20

Ilya I

1,2821 gold badge12 silver badges20 bronze badges

1 Comment

webnesto Over a year ago

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.

kennebec · Accepted Answer · 2012-04-14 16:21:01Z

0

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

answered Apr 14, 2012 at 16:21

kennebec

105k32 gold badges109 silver badges127 bronze badges

Collectives™ on Stack Overflow

regular expression with css properties

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related