How do I match individual CSS attributes using RegEx

Question

I'm trying to expand a minified CSS file (don't ask) to make it human readable. I've managed to get most of the expanding done but I'm stuck at a very weird case that I can't figure out.

I have CSS that looks like this:

.innerRight {
border:0;color:#000;width:auto;padding-top:0;margin:0;
}
a {
color:#000;text-decoration:underline;font-size:12px;
}
p,small,ul,li {
color:#000;font-size:12px;padding:0;
}

I've tried (.+):(.+); as the search and \t\1: \2;\n as the replace. The find RegEx is valid, the only problem is that it matches the entire line of attributes. I've tried the non-greedy character, but I must not be putting it in the right place.

What the above find RegEx matches is:

0: border:0;color:#000;width:auto;padding-top:0;margin:0;
1: color:#000;text-decoration:underline;font-size:12px;
2: color:#000;font-size:12px;padding:0;

While those are technically correct matches, I need it to match border:0;, color:#000;, etc separately for my replace to work.

Wouldn't it be easier just to insert a line break directly after each semicolon and ignoring the context. Or do you need a general solution which will work with a semicolon for eaxmple inside a string (which is quite unlikely in CSS)? — RoToRa
– RoToRa, Commented Nov 24, 2010 at 13:24
Or you could just use one of the many CSS formatters/beautifiers online or built into an editor: google.de/search?q=css+(beautifier+OR+formatter) — RoToRa
– RoToRa, Commented Nov 24, 2010 at 13:27
Programming language independent. I could use a formatter/beautifier, but I'm taking this opportunity to get some RegEx practice in. — Tarek Fadel
– Tarek Fadel, Commented Nov 24, 2010 at 13:42

Brandon Montgomery · Accepted Answer · 2010-11-24 13:24:13Z

3

Try this - use non-greedy matching. This works for me

(.+?):(.+?);

answered Nov 24, 2010 at 13:24

Brandon Montgomery

6,9853 gold badges50 silver badges71 bronze badges

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

Comments

Robusto · Accepted Answer · 2010-11-24 13:24:49Z

0

Forget the colon. Just replace all semicolons with ";\n".

In Javascript, for example, you could write:

text = text.replace(/;/gm,";\n");

I would further refine that to address leading-space issues, etc., but this will put every style rule on its own line.

answered Nov 24, 2010 at 13:24

Robusto

32k8 gold badges59 silver badges79 bronze badges

2 Comments

Gumbo Over a year ago

Do this only if there is no comment, URL, or string that contains that character. You might also want to check if there is not already a new line following the ;.

Robusto Over a year ago

@Gumbo: True. I should post a macro I have that does all this formatting, and I will once I get in to the office.

Collectives™ on Stack Overflow

How do I match individual CSS attributes using RegEx

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related