bjornte bjornte - 1 month ago 4
CSS Question

How to remove all classes with a certain prefix (using Visual Studio Code)?

I'm an interaction designer in an Angular based HTML project. I'm trying to create a new HTML template based on one that's made by another team. I use Firebug to capture the existing HTML and modify it in Visual Studio Code.

Along with the HTML that is useful to me, I also get a ton of

tags, attributes, classes and comments that (I assume) was used to populate the template. I would like to remove them all.

At this point I have been successful at removing the comments, tags and attributes using the following regex:


To break it down:

  • Comments:

  • Tags:

  • Attributes:

But for the time being I'm stuck at classes. I can find the things I want to remove:
(limitation: removes only one
class per
attribute), but I can't replace them using
. It seems Visual Studio Code supports regex in the find field, but not in the replace field.

How to proceed?


Use the dollar sign to define backreferences in Visual Studio Code.

enter image description here

Well, I should drop a couple of more comments on your regexes:

  • The comment regex will only work with the comments that are single on one line. If there can be two or more on one line, use <!--(?:(?!-->).)*(ngIf|ngRepeat|ngInclude).*?--> (note the tempered greedy token (?:(?!-->).)*)
  • Similar problems may arise with </{0,1}(ng|cs)-.*> - use a negated character class [^<]*? to prevent any tag overflows - </?(ng|cs)-[^<]*?> (note the < should be used since > is often left unserialized and the {0,1} limiting quantifier is in fact equal to ?)