Question

I have a quick question for you (for you, I’ve personally spent hours on this). I’ve created a web application in Javascript/Jquery to validate a CSS stylesheet.

I need to extract multiple CSS class names from a selector with Regex. I’ve done something like:

var selector = this.value;
var userNewClass = selector.match(/[.]([A-Za-z_-]*)/);
alert(userNewClass.toString());

It’s almost working, but I have two issues with the code (you have a Regex noob here).
If I write something like:

.test:hover

It returns me

.test, test 

The same class name but on with the dot and the other without the dot.
If I write a selector with multiple class name:

.test, .hello

I’m getting the same result…Is there anyway to modify my Regex (or my code ?) to obtain all the classes names with the dot (.) only, considering the user can have a unlimited number of classes in the same selector?

Answer 1

.test is the full match, test is the captured group (anything in parens ()). You also need to add a g at the end after the closing / to match every instance and not just the first one.

That said, you likely don’t need regex for this and might be better served using split on the string.

'.test, .hello'.split(', ') // returns an array ['.test', '.hello']

If you absolutely must use regex, try this:

/\.(\w+)/g

This will match (and capture) any and all sequences of one or more letters and/or numbers \w+ which follow a literal .