Matching CSS Selectors with a Javascript RegExp

Question

Basically I need to pattern match any and all CSS selectors in a CSS file. Ideally it should be able to grab all of these rules (and any other rule someone could make up in a CSS file). This is for a javascript CSS parser if that helps at all.

#div div .child {

}

.somediv, #someotherdiv {

}

body:hover {

}

The best i've been able to come up with so far is something like:

/(#|\.|[a-zA-Z])(.*) {/g

But this just ends up selecting more than what it needs to... Like one selector, all it's rules, and the up to the next selector's opening "{". Been trying for hours with this. Thanks in advance!

clmarquart · Accepted Answer · 2011-03-30 05:11:09Z

3

If you're just concerned about the selectors themselves, this should get you a little closer. I think it is matching single spaces, so could use a little more tweaking yet...

var css = ...some css string...
var found = css.replace(/{([^}]*)}/gm,"{}").match(/([#|\.]?)([\w|:|\s|\.]+)/gmi);

edited Mar 30, 2011 at 5:11

answered Mar 30, 2011 at 4:46

clmarquart

4,7411 gold badge29 silver badges25 bronze badges

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

1 Comment

Madison Williams Over a year ago

This worked awesomely. All I had to add was a quick "{" at the end it it's working. Thanks a bunch, man.

Shad · Accepted Answer · 2011-03-30 04:48:43Z

1

I would change it to a lazy star and try again:

/(#|\.|[a-zA-Z])(.*?) {/g

That way it won't be greedy.

answered Mar 30, 2011 at 4:48

Shad

15.5k2 gold badges24 silver badges34 bronze badges

1 Comment

Madison Williams Over a year ago

This isn't the regex that I need, but your lazy star helped with another regexp I had to make. So +1 for you sir!

Rui Jiang · Accepted Answer · 2011-03-30 04:36:27Z

0

In order to do brace-matching, you need a language more descriptive than what plain old regex provides. http://www.regular-expressions.info/named.html has some examples of what different programming languages have come up with to deal with the "named group" problem.

You'll need a parser, not just regex for what you're doing.

answered Mar 30, 2011 at 4:36

Rui Jiang

1,6721 gold badge16 silver badges26 bronze badges

Comments

Nate Berggren · Accepted Answer · 2013-01-17 18:30:29Z

0

Have you tried replacing .* with negated character class?

/(#|\.|[a-zA-Z])([^{]*) {/g

answered Jan 17, 2013 at 18:30

Nate Berggren

314 bronze badges

Collectives™ on Stack Overflow

Matching CSS Selectors with a Javascript RegExp

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Linked

Related