RegEx to replace a class name in a CSS file

Question

I have a css file in which a class name appears multiple times. Call it .foo The same name also appears in the file as foo and #foo

I'm trying to create a JavaScript regular expression that can match the css class .foo but disregard the other variations foo and #foo.

So far I've tried the following variations without success:

css.replace(/.foo/g,"")

css.replace(/^.foo/g,"")

css.replace(/^.foo*/g,"")

css.replace(/\b.foo/g,"")

css.replace(/.foo\b/g,"")

I wonder what if we have some .foo word such as in an image URL in the CSS file? replacing like this is too dangerous. — King King
– King King, Commented May 7, 2014 at 16:42
So you should do like this css.replace(/\.foo(?=[^{]*\{)/g,"") — King King
– King King, Commented May 7, 2014 at 16:48

Community · Accepted Answer · 2017-05-23 11:50:22Z

5

Escape a dot in your regular expression:

css.replace(/\.foo/g, '');

Otherwise it will match any non newline character before foo.

If you care about matching only .foo and not .foobar you may add \b to the regex as @Niet suggested in the comments: /\.foo\b/g.

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered May 7, 2014 at 16:38

VisioN

146k35 gold badges287 silver badges291 bronze badges

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

6 Comments

VisioN Over a year ago

@NiettheDarkAbsol たのむぞ。ZIG！！

Niet the Dark Absol Over a year ago

+1 because you know what you doing. But consider adding \b at the end so you don't match a .foobar class.

VisioN Over a year ago

@NiettheDarkAbsol Yeah, that makes perfect sense. Thanks.

King King Over a year ago

although this may rarely happen but it depends on the actual string foo, such as we have this in the CSS file background:url(http://whatever.foo/someimage); then we know what will happen.

VisioN Over a year ago

@KingKing Well, I personally wouldn't do parsing of CSS document especially with regular expressions. Regarding the current case it definitely depends on the context.

|

TML · Accepted Answer · 2014-05-07 16:38:12Z

1

You need to escape the . to get a literal dot.

css.replace(/\.foo/g, "");

answered May 7, 2014 at 16:38

TML

13k3 gold badges42 silver badges47 bronze badges

Collectives™ on Stack Overflow

RegEx to replace a class name in a CSS file

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related