javascript reg pattern match css selector

Question

I want to try filter all selector using js reg. Predict I want to match div#abc.read-more.(Please note that div, #abc, .read-more all can exist or not.But if div exist, it should be at the beginning). I list all situations I know in two array: matched and unmatched. Here's the test code . I use jasmine test engineer.

The reg pattern I use now is /((\bdiv)+|(\.read-more)+|(#abc)+)(\s*|(:\w+)+)\s*(((?=,)(.*))|$)/

But there's still have two situations not being pass. .read-morediv#abc and #abcdiv.read-more. Common thing is div is at the middle.

Sorry, But I just get that there's two more situations will fail too: div.read-morediv#abc and div#abcdiv.read-more. These two both should be unmatched.

Anyone can help here? And I will very appreciate If you can explain how you get your solution. :D

• elclanrs: Why are you doing this if I may ask? You should be able to use the DOM.
• Felix Kling: #abcdiv.read-more would match the element with ID abcdiv and class read-more. Is that really what you want? Type selectors must always be at the beginning: w3.org/TR/CSS2/selector.html#selector-syntax.
• tjfdfs: @elclanrs, what I plan to do is emulate devtool or firebug. user click one elemnt , then show all relative style to user.
• tjfdfs: @FelixKling, yes. I try to match selector. And some class like .divider will match div, right? I need to filter these out.

Answer 1

For div.read-morediv#abc:

((\bdiv)+|(.read-more)+|(#abc)+) matches the final '#abc'

(\s*|(:\w+)+) matches the following 0 spaces (\s*)

\s* again matches 0 spaces

(((?=,)(.*))|$) matches the end of the string (via the |$)

The pattern for the other example is similar. In both cases, the presence of 'div' is entirely ignored in generating the match, because another part of the 3-part OR in the first group is sufficient.

• tjfdfs: yes, those case behavior as you said. Do you have any solution? So far, I still can figure out one solution for these situations. :)
• S McCrohan: Check out this question - I think it'll help. The negative lookbehind is really what you wanted here (to verify that div doesn't occur after the other two), but there are some workarounds. stackoverflow.com/questions/13458946/…