Javascript Regular Expression to Parse CSS

Question

I have CSS snippet like

.is-error{
  color: #d8000c;
}
.is-success{
  color: #4f8a10;
}

I want to parse it with regular expression in javascript such that i get an array, with class name and corresponding properties.

Regular Expression I wrote: /^(?:([\w.\-\>\~\_\s\^\'\"\=\#\*\[\]\:\,\+]+)\{(.*)\})$/

gives me output:

array[1] = .is-error
array[2] = color: #d8000c;}.is-success{color: #4f8a10

desired output:

array[1] = .is-error
array[2] = color: #d8000c;
array[3] = .is-success
array[4] = color: #d8000c;

There are already libraries for doing this; what is your use-case? If you are a beginner with regexes and not already a CSS expert, parsing arbitrary rules is not going to be easy. You'll also want to avoid using "one regex to rule them all"; split up parsing into different subtasks instead. — beerbajay
– beerbajay, Commented Mar 26, 2015 at 8:12
@beerbajay I was able to achieve what i wanted with the solution given by amit. I was experimenting parsing of CSS. I wanted to know how the CSS parsing libraries are actually working. — Junaid Hamza
– Junaid Hamza, Commented Mar 26, 2015 at 11:59

Amit Joki · Accepted Answer · 2015-03-26 08:27:06Z

4

Don't try to match it with a complex regex. But, instead split using a less complex one.

For splitting, we can use String.split and pass the regex /[{}/ into it and then we use Array.map to trim the strings so as to get only the content and removing the white space. But prior to doing that, we will just remove the unwanted empty strings using Array.filter

var arr = str.split(/[{}]/).filter(String).map(function(str){
    return str.trim(); 
});

It also has the advantage of working on all css-rules and not just classes, provided the CSS is a valid one.

edited Mar 26, 2015 at 8:27

answered Mar 26, 2015 at 8:18

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

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

1 Comment

Junaid Hamza Over a year ago

Could you please guide me, if in my CSS file i have multi-line comments, then how could i work out such situation. I can opt 2 options, 1) Retain all the comments at the same place. 2) Delete all the comments from CSS For both of these, option how can i make it work

Collectives™ on Stack Overflow

Javascript Regular Expression to Parse CSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related