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

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.