regular expression to match CSS "<property>: <value>"

Question

I've retrieved a CSS rule from document.styleSheets and am looking now to extract it's properties and values.

cssText = ".expl { position: absolute; background-color: rgb(204, 204, 204); max-width: 150px; }";

Is it possible with regular expressions to retrieve the properties and their appropriate values within a match? Plus, strip the trailing semi-colon.

I want to get the result as follows:

position: absolute // match 1
background-color: rgb(204, 204, 204) // match 2
max-width: 150px // match 3

I've only got to the point where I'm extracting what's within the brackets: (?<={)(.*)(?=}), have no clue with what should I continue.

How do I achieve this?

Thanks in advance!

were you aware that cssText doesn't include the selector? so your example would be cssText = "position: absolute; background-color: rgb(204, 204, 204); max-width: 150px; " — Joseph Marikle
– Joseph Marikle, Commented Oct 6, 2011 at 19:16
You don't need a regexp for this at all. Use the CSS stylesheet DOM. quirksmode.org/dom/tests/stylesheets.html — Matt Ball
– Matt Ball, Commented Oct 6, 2011 at 19:20

Joseph Marikle · Accepted Answer · 2011-10-06 19:27:21Z

4

You could just split the string on the ;

document.getElementById(id).style.cssText.split(";")

EDIT:

note that the cssText property of a style object does not contain the selector

enter image description here

EDIT 2:

Ok I did a little more digging and it appears you are getting your cssText property from a CSSStyleRule object. This includes the selectors. You can get a semicolon delimited list of the actual rules with a little more tree traversal. You can get the style object with

document.styleSheets[1].cssRules[0].style.cssText;

instead of

document.styleSheets[1].cssRules[0].cssText;

See this drill down:

enter image description here

edited Oct 6, 2011 at 19:27

answered Oct 6, 2011 at 19:13

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

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

3 Comments

Cfreak Over a year ago

Apparently someone is going through and just downvoting everything in this thread.

tomsseisums Over a year ago

Oh, I guess should've descended one more time, heh.. Because you answered first, plus the effort- answer goes to you. Thanks!

Rob W Over a year ago

Note: It is not 100% reliable. For instance, background-image:url("data:image/png;base64,.....");

Mukyuu · Accepted Answer · 2023-01-25 02:29:29Z

3

Pull everything out between the brackets and then just split it out:

matches = cssrule.match(/{([^}]+)}/);
rules = matches[1].split(';');

edited Jan 25, 2023 at 2:29

Mukyuu

6,7998 gold badges42 silver badges63 bronze badges

answered Oct 6, 2011 at 19:14

Cfreak

19.4k6 gold badges52 silver badges64 bronze badges

5 Comments

Joseph Marikle Over a year ago

oh! I see why you did that... I think the OP misunderstands though. the cssText property doesn't include the selector.

tomsseisums Over a year ago

@Joseph, it retrieves selector on Chrome when gathered by cssRules. Maybe rules acts differently.

Cfreak Over a year ago

cssText is just happens to be his variable name. I think that's confusing the issue. It's not the cssText property.

Joseph Marikle Over a year ago

@Cfreak no, he said he got it from document.styleSheets... I see what happened... going to update my answer again.

tomsseisums Over a year ago

It actually is the cssText property, and as I've already said, it contains the selector. At least on Chrome it is.

David Hellsing · Accepted Answer · 2011-10-06 19:35:56Z

2

My regexp is a bit rusty, but something like:

var arr = cssText.replace(/\s/g,'')
                 .replace(/^.*{([^}]+)}.*/,'$1')
                 .match(/([^;]+)/g);

should create:

["position:absolute","background-color:rgb(204,204,204)","max-width:150px"]

answered Oct 6, 2011 at 19:35

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Comments

CaffGeek · Accepted Answer · 2011-10-06 19:23:22Z

0

This breaks it all out into named items

\s*(?<rule>(?<selector>[^{}]+){(?<style>[^{};]+:[^{};]+;\s*)+})

If your parser doesn't support named groups (which javascript doesn't) remove the ?<text> from the regex, like this

\s*(([^{}]+){([^{};]+:[^{};]+;\s*)+})

Since your cssText may not contain the css selector, you may want to just split on ;. If it doesn't this works pretty good for parsing stylesheets. I used it in a tool I wrote to inline stylesheets.

answered Oct 6, 2011 at 19:23

CaffGeek

22.2k18 gold badges106 silver badges186 bronze badges

Collectives™ on Stack Overflow

regular expression to match CSS "<property>: <value>"

4 Answers 4

3 Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related