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

Community · Accepted Answer · 2017-05-23 11:43:25Z

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, 2017 at 11:43

CommunityBot

11 silver badge

answered Sep 12, 2012 at 15:51

Andrew Cheong

30.4k17 gold badges103 silver badges173 bronze badges

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

2 Comments

Andrew Cheong Over a year ago

Updated this solution in response to comment to Anirudha's solution.

effectica Over a year ago

Yes works great. I was getting cross eyed trying to find a solution. Thank you.

Anirudha · Accepted Answer · 2012-09-12 15:53:08Z

1

Here is the regex for that

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

edited Sep 12, 2012 at 15:53

answered Sep 12, 2012 at 15:42

Anirudha

32.9k8 gold badges71 silver badges90 bronze badges

3 Comments

effectica Over a year ago

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 Over a year ago

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 regexpal.com

Anirudha Over a year ago

@effectica it would not be included in the result..access it with value property of regex

Rob Raisch · Accepted Answer · 2012-09-12 17:07:09Z

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, 2012 at 17:07

answered Sep 12, 2012 at 16:10

Rob Raisch

17.4k4 gold badges51 silver badges59 bronze badges

2 Comments

Rob Raisch Over a year ago

I would like to point out that my solution works irrespective of the presence, absence or nesting of curly-braces.

Leo K Over a year ago

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.

Collectives™ on Stack Overflow

regex match css class name from single string containing multiple classes

main .items-Outer p

footer .footer-inner p.intro

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

main .items-Outer p

footer .footer-inner p.intro

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related