regex match css class name from single string containing multiple classes

Question

I have a long string that contains multiple css classes. With regex I would like to match every class name as I then need to replace these class names like so:

<span>CLASSNAME</span>

I have tried for hours to come up with a solution and I think I am close however for certain class names I am not able to exclude closing curly brackets from the match.

Here is a sample string I have been carrying out testing on:

#main .items-Outer p{ font-family:Verdana; color: #000000; font-size: 50px; font-weight: bold; }#footer .footer-inner p.intro{ font-family:Arial; color: #444444; font-size: 30; font-weight: normal; }.genericTxt{ font-family:Courier; color: #444444; font-size: 30; font-weight: normal; }

And here is the the regex I came up with so far:

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

Please look at the screenshot I am attaching as it will show more clearly the matches I get. My problem is that I would obviously like to exclude curly brackets from any match.

regex matches

To clarify, example of matches I am after are:

main .items-Outer p
footer .footer-inner p.intro
.genericTxt

score 2 · Accepted Answer · edited May 23 '17 at 11:43

2

If and only if there won't be any nested curly braces, the following should work:

/\.(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)(?![^\{]*\})/

Here's a demo!

Note that I'm referencing this question for the valid-CSS-class-name regex.

EDIT

I just read your comment clarifying that you wish to match the entire selector, not just class names. In that case, try this, although I'm not as confident about its robustness:

/[^}]*(?=\{|$)/

Here's a demo of that one.

edited May 23 '17 at 11:43

Community

1
1

answered Sep 12 '12 at 15:51

Andrew Cheong

29,362
15
90
145

Updated this solution in response to comment to Anirudha's solution. – Andrew Cheong Sep 12 '12 at 16:00
Yes works great. I was getting cross eyed trying to find a solution. Thank you. – effectica Sep 12 '12 at 16:09

Anirudha · Answer 2 · 2012-09-12T15:53:08.413

1

Here is the regex for that

(?:(\}|^)).*?(?:\{)

edited Sep 12 '12 at 15:53

answered Sep 12 '12 at 15:42

Anirudha

32,393
7
68
89

thanks for your help, and sorry I might have not explained well what I need. I need the whole class name. For instance taking the string I posted aove, I would need these matches : #main .items-Outer p and #footer .footer-inner p.intro and .genericTxt – effectica Sep 12 '12 at 15:45
thank you for that but I am still getting curly braces in the matches. Am i doing something wrong with your answer? I have tested it here http://regexpal.com/ – effectica Sep 12 '12 at 15:58
@effectica it would not be included in the result..access it with value property of regex – Anirudha Sep 12 '12 at 16:00

Rob Raisch · Answer 3 · 2012-09-12T17:07:09.283

0

Assuming str contains your CSS, the following regex:

str.match(/(?:#\w+\s+)?\.[\w-]+(?:\s+\w+\s*\.\w+|\s+\w+)?/ig)

returns:

["#main .items-Outer p", "#footer .footer-inner p.intro", ".genericTxt"]

The regex is:

(?:#\w+\s+)?      -- optional leading CSS id, i.e. #abc
\.[\w-]+          -- CSS classname, i.e. .ab-c
(?:
    \s+\w+\s*\.\w+  -- optional CSS elt followed by classname, i.e. p.abc
|                   -- or
    \s+\w+          -- optional CSS elt, i.e. p
)?

See demo

edited Sep 12 '12 at 17:07

answered Sep 12 '12 at 16:10

Rob Raisch

17,040
4
48
58

I would like to point out that my solution works irrespective of the presence, absence or nesting of curly-braces. – Rob Raisch Sep 12 '12 at 17:01
bug, this will also match things that are not class names, within curly brackets e.g. line-height: 1.18; within curly brackets results in .18 matching. – Leo K Apr 03 '15 at 11:39

regex match css class name from single string containing multiple classes

main .items-Outer p

footer .footer-inner p.intro

3 Answers3