2

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 ng- and cs- 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:

(<!--.*(ngIf|ngRepeat|ngInclude).*-->)|(</{0,1}(ng|cs)-.*>)|((ng|cs)-[a-z-]*="[^"]*")

To break it down:

  • Comments: <!--.*(ngIf|ngRepeat|ngInclude).*-->
  • Tags: </{0,1}(ng|cs)-.*>
  • Attributes: (ng|cs)-[a-z-]*="[^"]*"

But for the time being I'm stuck at classes. I can find the things I want to remove: (class="[^"]*)ng-[-a-z]*([^"]*") (limitation: removes only one ng- class per class attribute), but I can't replace them using \1\2. It seems Visual Studio Code supports regex in the find field, but not in the replace field.

How to proceed?

bjornte
  • 749
  • 1
  • 9
  • 31

1 Answers1

1

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 ?)

Note that starting with VSCode 1.29, you need to enable search.usePCRE2 option to enable lookaheads in your regex patterns.

Wiktor Stribiżew
  • 607,720
  • 39
  • 448
  • 563
  • Thanks again. After you provided the `$` solution I discovered that `(class="[^"]*)ng-[a-z]*([^"]*")` is buggy too when there's more than one `ng-` class. I'm new to regex and pushing my luck here :-) – bjornte Sep 15 '16 at 14:09
  • If you provide a use case, I will try to help. – Wiktor Stribiżew Sep 15 '16 at 14:10
  • I was about to explain, and then I understood that I misunderstood what caused the bug :-) I should replace [a-z] with [-a-z] to catch items with multiple hyphens such as `ng-isolate-scope`. I still don't get how to catch multiple `ng-` classes inside a single `class` attribute, though. – bjornte Sep 15 '16 at 14:19
  • If you provide a use case - a sample string with expected output - I would be able to help. – Wiktor Stribiżew Sep 15 '16 at 14:30
  • OK, so I would like `class="sub-nav ng-scope dropdown-menu ng-hide"` to become just `class="sub-nav dropdown-menu"`. If there are a few extra spaces, that doesn't matter :-) – bjornte Sep 15 '16 at 14:40
  • 1
    Aha, that is impossible with the VSC regex to do that with 1 single regex pass. You can do it with PCRE regexps, or in Notepad++ though. Something like [`(class="|(?!^)\G)((?:(?!ng-)[^"<])*)ng-` and `$1$2` replacement](https://regex101.com/r/kE5hI7/1). – Wiktor Stribiżew Sep 15 '16 at 14:47
  • Holy smokes. I will do multiple, manual passes in VSC then :-D – bjornte Sep 15 '16 at 14:50