trying to scrape and organize css in Javascript by class

Question

I obtain some CSS and store it in a var, but i am trying to use regexes to parse classes. Thats the easy part, but it seems that i have issues with the regex to scrape contents between the braces to store.

My attempt is at: http://jsfiddle.net/2qaCY/

All i want is to iteratively loop through the classes and scrape the contents between the braces.

code on fiddle:

var css = ".Winning{color: #24CCFF;background-color: #FF8091;}.Losing{color: #2EFFCE;background-color: #DB4DFF;}.crayons{font-family: papyrus;font-size: 32pt;}";

var reg = /\.[a-zA-Z0-9]*\{/ig;
var matches = css.match(reg);
for (var m in matches) {
    var sClass = matches[m].substr(0, matches[m].length - 1);
    $("body").append(sClass + "<br />");
    var c = new RegExp("\\." + sClass + "[\\n\\s]*\{[\\s\\n.]*\}", "ig");
    var out = c.exec(css);
    $("body").append(out);
    $("body").append("<br /><br />");
}

I would instead convert it into an object then parse the object. You would just need to place a comma after every }, a : before every {, replace every ; with a comma, and then wrap every key and value in double quotes while escaping inner double quotes. From that object, you can create an array of objects, sort them by type/name, and then output them however you like. Might have to do more cleaning up in the first part to make it work — user400654
– user400654, Commented Sep 12, 2013 at 18:34
MMM, i actually think i like that response. Definitely thinking outside the box. Im just thinking of how i would implement it all instead of just the pseudocode. — Fallenreaper
– Fallenreaper, Commented Sep 12, 2013 at 18:36
Take a look at this question regarding parsing CSS with javascript. stackoverflow.com/questions/3326494/… — Vlad
– Vlad, Commented Sep 12, 2013 at 18:40
Here's a rough sample: jsfiddle.net/2qaCY/8 I did it in many steps so i could inspect the result as i worked through it. — user400654
– user400654, Commented Sep 12, 2013 at 18:44
@Fallenreaper yeah, i posted without testing. Here it is fixed: jsfiddle.net/2qaCY/10 The only thing i see at the moment that this won't work on is : in the css selector, so no psudoelements or psudoselectors. — user400654
– user400654, Commented Sep 12, 2013 at 18:55

bitoiu · Accepted Answer · 2013-09-12 19:01:04Z

1

Ok, so the following example stores the class in an array and the whole thing in a map where the key is the class and the contents are the value for that key.

If you want a solution with regexp it's 10 more minutes but this is what you want I believe.

http://jsfiddle.net/2qaCY/11/

var css = ".Winning{color: #24CCFF;background-color: #FF8091;}.Losing{color: #2EFFCE;background-color: #DB4DFF;}.crayons{font-family: papyrus;font-size: 32pt;}";

var reg = /\.[a-zA-Z0-9]*\{[a-zA-Z0-9:\- #;]+\}/ig;
var matches = css.match(reg);
var classes = []
var classMap = {}

matches.map(function(item) {
    var cl = (item.split("{")[0])
    classes.push(cl)
    classMap[cl] = item.split("{")[1].split("}")[0]            
})

// All the classes in an array
console.log(classes);
console.log(classMap);

edited Sep 12, 2013 at 19:01

answered Sep 12, 2013 at 18:39

bitoiu

7,5595 gold badges45 silver badges63 bronze badges

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

6 Comments

Fallenreaper Over a year ago

in your example, you end up printing out sClass, which is the entire line. it does not actually break it into 2 objects. BUT from that point, you could break it into 2 pieces far easier with (HOPEFULLY) regexes /\..*[\n\s]*{/ minus end charand /\{[\n.]*\}/ minus first and end character

bitoiu Over a year ago

Tell me line by line which HTML you want in the end and I'll fix it. It was already putting the class in the HTML, so not sure what is the goal if not printing the whole thing?

Fallenreaper Over a year ago

i am going to want the class: Winner, Losing, crayons in an array, and the contents of the braces for each class in a hash. so: {Winning:"color: #24CCFF;background-color: #FF8091;", Losing:"color: #2EFFCE;background-color: #DB4DFF;", crayons: "font-family: papyrus;font-size: 32pt;"}

bitoiu Over a year ago

check my updated code and fiddle. before running it open the chrome/firefox console to see the output of the array and map.

Fallenreaper Over a year ago

Wow. i really like that, and i forgot entirely about .map()

|

Collectives™ on Stack Overflow

trying to scrape and organize css in Javascript by class

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related