Parse a string of CSS declarations and convert it to an array

Question

I have a ugly block of css declarations.

ol{margin:0;padding:0}p{margin:0}.c5{width:468.0pt;background-color:#ffffff;padding:72.0pt 72.0pt 72.0pt 72.0pt}.c4{font-size:24pt;font-weight:bold}.c3{margin:0;padding:0}.c0{direction:ltr}.c1{height:11pt}.c2{font-style:italic}body{color:#000000;font-size:11pt;font-family:Arial}h1{padding-top:24.0pt;color:#000000;font-size:24pt;font-family:Arial;font-weight:bold;padding-bottom:6.0pt}h2{padding-top:18.0pt;color:#000000;font-size:18pt;font-family:Arial;font-weight:bold;padding-bottom:4.0pt}h3{padding-top:14.0pt;color:#000000;font-size:14pt;font-family:Arial;font-weight:bold;padding-bottom:4.0pt}h4{padding-top:12.0pt;color:#000000;font-size:12pt;font-family:Arial;font-weight:bold;padding-bottom:2.0pt}h5{padding-top:11.0pt;color:#000000;font-size:11pt;font-family:Arial;font-weight:bold;padding-bottom:2.0pt}h6{padding-top:10.0pt;color:#000000;font-size:10pt;font-family:Arial;font-weight:bold;padding-bottom:2.0pt}

Client-side, I want to treat it as a string and convert it in an array, with each declaration (for example aaa {bbb: ccc; ddd: eee} as an element of the array, so the results look like

["ol{margin:0;padding:0}","p{margin:0}",...]

How can I do this using Javascript? (jQuery is fine)

how you get this CSS - is it from website (<style> and <link>) or just simple string delivered with script? — RobertO
– RobertO, Commented Jun 1, 2011 at 17:10

Victor · Accepted Answer · 2011-06-01 17:20:39Z

2

var css='ol{margin:0;padding:0}p{margin:0}.c5{width:468.0pt;background-color:#ffffff;padding:72.0pt 72.0pt 72.0pt 72.0pt}.c4{font-size:24pt;font-weight:bold}.c3{margin:0;padding:0}.c0{direction:ltr}.c1{height:11pt}.c2{font-style:italic}body{color:#000000;font-size:11pt;font-family:Arial}h1{padding-top:24.0pt;color:#000000;font-size:24pt;font-family:Arial;font-weight:bold;padding-bottom:6.0pt}h2{padding-top:18.0pt;color:#000000;font-size:18pt;font-family:Arial;font-weight:bold;padding-bottom:4.0pt}h3{padding-top:14.0pt;color:#000000;font-size:14pt;font-family:Arial;font-weight:bold;padding-bottom:4.0pt}h4{padding-top:12.0pt;color:#000000;font-size:12pt;font-family:Arial;font-weight:bold;padding-bottom:2.0pt}h5{padding-top:11.0pt;color:#000000;font-size:11pt;font-family:Arial;font-weight:bold;padding-bottom:2.0pt}h6{padding-top:10.0pt;color:#000000;font-size:10pt;font-family:Arial;font-weight:bold;padding-bottom:2.0pt}';

var split=css.split('}');
for(i=0;i<split.length;i++){
  split[i]+='}';
}

or, even better:

css=css.replace(/}/g,'}~');
var cssArray=css.split('~');

edited Jun 1, 2011 at 17:20

Victor

24.1k31 gold badges96 silver badges133 bronze badges

answered Jun 1, 2011 at 17:08

Trey

5,5404 gold badges25 silver badges31 bronze badges

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

1 Comment

Victor Over a year ago

I changed split.count to split.length... the first solution worked great!

arturh · Accepted Answer · 2011-06-01 17:16:10Z

1

Does this do the trick?

function split_css(s){
    return s.split("}")
            .filter(function(s){return !!s;}) // discard empty strings
            .map(function(s){return s+"}";    // restore the }
});

answered Jun 1, 2011 at 17:16

arturh

4695 silver badges9 bronze badges

Comments

Eder · Accepted Answer · 2011-06-01 17:36:30Z

Regular Expressions!

var css='ol{margin:0;padding:0}p{margin:0}.c5{width:468.0pt;background-color:#ffffff;padding:72.0pt 72.0pt 72.0pt 72.0pt}.c4{font-size:24pt;font-weight:bold}.c3{margin:0;padding:0}.c0{direction:ltr}.c1{height:11pt}.c2{font-style:italic}body{color:#000000;font-size:11pt;font-family:Arial}h1{padding-top:24.0pt;color:#000000;font-size:24pt;font-family:Arial;font-weight:bold;padding-bottom:6.0pt}h2{padding-top:18.0pt;color:#000000;font-size:18pt;font-family:Arial;font-weight:bold;padding-bottom:4.0pt}h3{padding-top:14.0pt;color:#000000;font-size:14pt;font-family:Arial;font-weight:bold;padding-bottom:4.0pt}h4{padding-top:12.0pt;color:#000000;font-size:12pt;font-family:Arial;font-weight:bold;padding-bottom:2.0pt}h5{padding-top:11.0pt;color:#000000;font-size:11pt;font-family:Arial;font-weight:bold;padding-bottom:2.0pt}h6{padding-top:10.0pt;color:#000000;font-size:10pt;font-family:Arial;font-weight:bold;padding-bottom:2.0pt}';
var re = new RegExp("([^{]+)\s*\{\s*([^}]+)\s*}", "g");
var result = css.match(re);
// result[0] => ol{margin:0;padding:0}

Collectives™ on Stack Overflow

Parse a string of CSS declarations and convert it to an array

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related