Regular expression to migration Angular Material form inputs from `placeholder` attribute to `<mat-label>` tags

angular-material-cdk-placeholder-migration.md

Manual Angular Material/CDK placeholder migration

Why?

The removed "legacy" appearance promoted input placeholders to the floating label if the label was not specified. All newer appearance settings require explicitly specifying a if one was not provided before. This change addresses an accessibility best practice of not using labels and placeholders interchangeably.

Migrating to MDC-based Angular Material Components | Form Fields

How?

This regular expression works with IntelliJ IDE and maybe with others, supporting regex search and replace.

Search

(?s)(\s+)(<[a-z-]+[^>]*?)\s+placeholder=\"([^"]*)\"

Replace

$1<mat-label>$3</mat-label>$1$2 

0. (?s) - makes the dot match all characters, including line breaks
1. (\s+) - group to fetch whitespace to correctly indent code
2. (<mat-[^>]*?) - non greedy search group until ... \s+placeholder= ...we find the placeholder and possbile whitespace to replace the whole placeholder attribute
3. ([^"]*) - the actual content of our our new <mat-label>

Thanks for this. I had a an error when using in VSCode and ended up using CoPilot to modify it to this:

Find

(\s+)(<[a-zA-Z-]+[^>]*?)\s*placeholder="([^"]*)"

Replace

$1<mat-label>$3</mat-label>\n$1$2

@JWess that works very nice, it helped me do tons of replacements. Thank you.

I have just two caveats for that command though, for people who may find this page:

1. Make sure to not run it on the input for a mat-chip-row, since those work differently and this script can mess those up if done without verfying.
2. The formatting does leave some large gaps in the first line of some input metadata like classes and whatnot, but proper style formatters should fix that.