How to parse and extract CSS selectors as strings?


Tags: javascript,css,regex,css-selectors

Problem :

What is the simplest way to extract css selectors as strings?

Given this as input:

#article{width:690px;overflow:hidden}
#article h2:first-child a{text-decoration:none}
#works .project p:last-child{margin-top:20px;font-size:13px}
#works .project img, #works .info img{width:680px;min-height:400px;border:1px dotted #ccc;margin-bottom:40px}

How can I get a list of selectors such as this:

var selectors = ['#article','#article h2:first-child a','#works .project p:last-child','#works .project img']


Solution :

Here is the solution I ended up with:

  1. Replace the curly braces including its contents with some unique characters. Regex was picked up from here Matching CSS Selectors with a Javascript RegExp
  2. Split the list at those unique characters.

Just wanted to post it here for documention:

var css = "#article[type=x]{width:690px;overflow:hidden}#article h2:first-child a{text-decoration:none}#works .project p:last-child{margin-top:20px;font-size:13px}#works .project img, #works .info img{width:680px;min-height:400px;border:1px dotted #ccc;margin-bottom:40px}"
var found = css.replace(/{([^}]*)}/gm,"~~~").split("~~~");

document.write(found);

    CSS Howto..

    how to position subheader right under header [closed]

    How can i get height form window top to my click point(a tag) on window using css or jquery or php?

    How to implement this logic in CSS?

    How to specifiy the order of CSS classes?

    How to make list items of one UL with fixed height be displayed as columns?

    How to center this popup text box

    Jquery how to add :hover to css style sheet

    How do I add two buttons side by side that are made up of an image?

    how to get rid of firefox image border

    How to not change color of link on hover

    How to hide a div on certain pages using CSS

    Anyone know how Atlassian sizes the height of the splitter div in Confluence?

    How to make a div with a circular shape? [duplicate]

    How to assign CSS to mobile page in asp.net

    How to stretch full height of a div using CSS? [closed]

    How to make animation smooth

    How to Set an if in css for opera browser? [duplicate]

    Trade off for CSS sprites: how many images to combine into one

    How can I add a border to the right side of this object?

    How do I code CSS to “change” when I load/pull content using ajax?

    How should it work if I want a page to have a theme-roller (more or less like the jQuery themeroller)

    CSS - How to select nth-child of form element?

    How can razor be used to expand CSS templates?

    How to add an image to an anchor tag using CSS?

    How do I use CSS to give a section a background that doesn't scroll with the page?

    How can i find and change css style in ruby?

    How do I get IE to display CSS DIV tables properly?

    How to avoid overlapping HTML tags to highlight text

    How to overlap two div with css

    How can I create HTML/CSS responsive tile?