use strict;
my $str = '<div [ ngStyle ]="{\'max-width.px\': i * 2 + 5}"></div>
<div [ngClass]="[
\'class-one\',
\'class-two\',
\'class-three\'
]"></div>
<div [style.right.%]="val"></div>
<div [@animation.trigger]="val"></div>
<img [attr.aria-label]="val" />
<div [my-property]="val"></div>
<div [my_property]="val"></div>
<div [myProperty$]="val"></div>
/// BELOW SHOULD RETURN NO MATCH
<div [%invalidProperty]="val"></div>
<div [invalidProperty)="val"></div>
<div>[my-property]="val"</div>
<div>
[my-property]="val"
</div>';
my $regex = qr/(?<!\>\s*)(\[\s*@?[-_a-zA-Z0-9.$]*%?\s*])(=)(["'])/mp;
if ( $str =~ /$regex/g ) {
print "Whole match is ${^MATCH} and its start/end positions can be obtained via \$-[0] and \$+[0]\n";
# print "Capture Group 1 is $1 and its start/end positions can be obtained via \$-[1] and \$+[1]\n";
# print "Capture Group 2 is $2 ... and so on\n";
}
# ${^POSTMATCH} and ${^PREMATCH} are also available with the use of '/p'
# Named capture groups can be called via $+{name}
Please keep in mind that these code samples are automatically generated and are not guaranteed to work. If you find any syntax errors, feel free to submit a bug report. For a full regex reference for Perl, please visit: http://perldoc.perl.org/perlre.html