Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

If someone has seen this question before, please link, perhaps I am searching the wrong things. I get nothing but results for parsing css files. Basically, I have an array of selectors, something like

[".thislink", "#myid"].

I'm looking to pass any string selector formatted like css3 selectors, ex:

a.thislink:not(.ignore)[href^=http://]

into a .match and split it out into an array of selectors, ideally:

[a, .thislink, :not(.ignore), [href^=http://]]

that I can loop through. I would then use that same breakdown on any :not() selectors to get a second array of "not", which I can match against my original array of individual selectors.

Tag, class, ID, attr, and :not selectors should be all I need. I can figure out how to break down the [attr=val] and :not(selectorshere) myself, I think.

PS: I know it would be easy to match my original array values in the string selector, however, I don't actually have an array of selectors. It would take several paragraphs to explain why exactly I'm doing it this way, so just trust me, I can't do it =)

share|improve this question
All attempts to write a regex myself have so far ended in misery. If I happen to stumble into the solution, I will of course post it here =) – Randy Hall Oct 18 '12 at 18:02
1  
Take a look at some of the questions in stackoverflow.com/questions/tagged/regex+css-selectors – BoltClock♦ Oct 18 '12 at 18:05
You may have seen these, but just in case: stackoverflow.com/questions/5481749/…, stackoverflow.com/questions/3781219/…, and stackoverflow.com/questions/9668057/… may be relevant. – acheong87 Oct 18 '12 at 18:07

1 Answer

up vote 2 down vote accepted

Just in case you won't succeed in finding a sufficient regex, may I suggest a JavaScript parser generator like PEG.js*. There's an online version of PEG.js that allows you to tinker with the grammar, then download the parser once satisfied with the result.

[ * ] PEG - Parsing Expression Grammar

For help with the grammar you should consult the W3C's working draft on CSS3 syntax W3C's recommendation on Selectors Level 3.

I took the time and played around and came up with a reduced grammar for a single selector (element/id/attr/class/pseudo). You'd want to go over it and refine it here and there, probably.

/*
 * PEG.js grammar
 */
start      = element? hash? (class / attr / pseudo)*
element    = '*' / ident

ident      = i:(nmstart) j:(nmchar*) {return i + j.join('');}
hash       = h:('#' ident) {return h.join('');}
class      = c:('.' ident) {return c.join('');}
attr       = a:('[' (b:[^\]]+ {return b.join('');}) ']') {return a.join('');}
pseudo     = p:(':' function) {return p.join('');}

nmstart    = [a-z] / nonascii
nmchar     = [a-z0-9-] / nonascii
function   = f:(ident '(' body ')') {return f.join('');}
body       = b:[^\)]+ {return b.join('');}

nonascii   = [\x80-\xff]
_          = [ \t\n\r]+ {return '';}
share|improve this answer
The Syntax module is pending a rewrite for compatibility with the latest developments; in the meantime, the Selectors 3 grammar is already fully specced and tested: w3.org/TR/css3-selectors/#w3cselgrammar In particular, notice that the current Syntax draft has no production for pseudo-elements with double colons. Not much has changed otherwise though. – BoltClock♦ Oct 19 '12 at 4:46
@BoltClock The questioner particularly mentioned the :not() pseudo-element. I tailored the (admittedly far from being standard compliant) grammar specifically to his needs. Anyway, thank you for the link. – aefxx Oct 19 '12 at 6:24
:not() is a pseudo-class, but point taken. – BoltClock♦ Oct 19 '12 at 6:35

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.