REGEX to select CSS Classes names from file

Question

I need to select all classes names in a css file, I am just new at it, also if someone can advice some good online tutorials for regex is appreciated.

Regex will be used in JavaScript

I came with this which works for simple classes: /(?<=\.).+?(?=\{)/g

.className { 
}

the above regex returned this: className

now I need to add for this too:

tagName1 {
}

#tagName2 {
}

.tagName3:hover {
}

.tagName4:anything {
}

should result in:
tagname1
tagname2
tagname3
tagname4

So how to select the above ones?

Do you have any examples of what should not match? Because from the only information you provided, this would work: (?<=\.|^|#)\w+(?=\s?{). You should also edit your question and include the language you are using. — K.Dᴀᴠɪs
– K.Dᴀᴠɪs, Commented Jul 4, 2019 at 0:45
I don't understand the last two examples. className is not a class name, it's a tag name. And #className is an ID, not a class name. What about more complex CSS selectors, like .classname:hover? — Barmar
– Barmar, Commented Jul 4, 2019 at 1:35
@Barmar, great, yes, I need to select tag names as well, and remove the :hover part or :(something) part — Roger
– Roger, Commented Jul 4, 2019 at 2:16

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

My guess is that, we would want to design an expression similar to,

([^:#\s.]+)(?:.*?)?\s*({[^}]*?})

where in this capturing group,

([^:#\s.]+)

we would deselect some chars such as ., # and space, and we'd collect our desired data.

Demo

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 4, 2019 at 2:11

Emma Marcier

27.8k12 gold badges49 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roger Over a year ago

Great, also, to mark as correct answer, I just forgot to ask to add this: in case the class is: .className:hover you need to remove the :hover part, or any :something part

Roger Over a year ago

Looks good, also, can you please add an extra one for selecting as well the content of the class? everything inside the { xxxx } as well as the classnames and the { ? this is my last request haha

Toto · Accepted Answer · 2019-07-04 10:34:39Z

1

I'd use:

 ^[.#]?(\w+)(?=(?::\w+)?\s*{)

The wanted name is in group #1

Demo with javascript regex flavour.

edited Jul 4, 2019 at 10:34

answered Jul 4, 2019 at 10:26

Toto

91.7k63 gold badges97 silver badges135 bronze badges

Collectives™ on Stack Overflow

REGEX to select CSS Classes names from file

2 Answers 2

Demo

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related