如何改进正则表达式以排除div内容中的属性语法匹配

需求说明 #

需要匹配作为HTML元素属性的[my-property]格式语法，但必须排除出现在<div>标签内容区域（即<div>与</div>之间的文本）中的该语法。现有正则/(?<!\>)(\[\s*@?[-_a-zA-Z0-9.$]*%?\s*])(=)(["'])/可覆盖多数场景，但无法排除多行<div>内容里的目标语法，需改进负向预查逻辑。

应匹配场景 #

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

不应匹配场景 #

<div [%invalidProperty]="val"></div>
<div [invalidProperty)="val"></div>
<div>[my-property]="val"</div>
<div>
    [my-property]="val"
</div>

解决方案 #

原正则的(?<!>)仅检查匹配位置前是否为>，无法处理多行<div>内容中换行、空格间隔的情况。改进后的正则通过覆盖任意字符（含换行）的负向预查，确保匹配内容不在<div>的文本区域内：

/(?<!<div>[\s\S]*)(?<!<\/?div[^>]*>[\s\S]*)(\[\s*@?[-_a-zA-Z0-9.$]*%?\s*])(=)(["'])/s

关键改进点 #

1. 替换原单一负向预查为双重预查：
   • (?<!<div>[\s\S]*)：排除<div>开始标签之后的所有内容区域
   • (?<!<\/?div[^>]*>[\s\S]*)：覆盖带属性的<div>标签（如<div class="box">）及</div>结束标签的情况
2. 启用单行模式s：让[\s\S]*可匹配换行符，处理多行<div>内容的场景

验证结果 #

改进后的正则可正确匹配所有目标属性场景，同时完全排除<div>内容区域（包括多行格式）中的[my-property]="val"语法。

内容的提问来源于stack exchange，提问作者Matthieu Riegler