Как регулярное выражение сопоставить отдельный тег HTML с внутренним тегом, когда в тексте существует несколько тегов

Question

скажем, мой текст выглядит следующим образом:

<button class="b1"
    (click)="b1()">
    <mat-icon>icon</mat-icon>
</button>

<button class="b1"
    (click)="b1()">
    <mat-icon>othericon</mat-icon>
    <span>Some Text</span>
</button>

Я пытаюсь использовать регулярное выражение (основанное на Rust без обхода ... потому что это то, что использует VSCode), чтобы выбрать только кнопки, включающие диапазон внутриих.Я пробовал это:

<button[\n\s\S]*?>[\n\s\S]*?span[\n\s\S]*?</button>

... но проблема в том, что он совпадает с начала первой кнопки в файле, даже если он не включает в себя диапазон,Я думал, что ленивый квантификатор найдет самое короткое соответствие, но, похоже, это не сработает.См. Мой RegExr http://regexr.com/4cdra для примера.Я хочу, чтобы он совпадал по нескольким строкам, что является причиной того, что [\n\s\S].

<button[\n\s\S]*?>[\n\s\S]*?</button> ... делает это хорошо, чтобы соответствовать только одним тегам ... однако заставить его работать с внутреннимитеги - вот где я застреваю.

Спасибо!

Answer 1

В общем, вы должны избегать попыток разбора HTML с помощью регулярных выражений. Учитывая, что вы делаете это из IDE, у вас может не быть выбора. Один прием, который может сработать, - использовать закаленную точку, чтобы избежать анализа закрывающего тега </button>:

<button[^>]*>((?!</button>)[\s\S])*<span>[\s\S]*?</button>

Демо

Большая часть шаблона, вероятно, вам знакома. Следует отметить, что я использую [\s\S] для сопоставления между строками. Также рассмотрим трюк с закаленной точкой:

((?!</button>)[\s\S])*

При этом используется отрицательный прогноз для сопоставления с любым символом по одному, если закрывающий тег </button> не встречается. Это не позволяет шаблону пересекать теги при попытке найти <span>.