regex101: PCRE (Legacy) Match Workspace

<the literal < (60₁₀ / 74₈ / 3C₁₆)

Non-Capturing Group(?:div|ul|li)

1st Alternativediv

divthe literal text div (case sensitive)

2nd Alternativeul

ulthe literal text ul (case sensitive)

3rd Alternativeli

lithe literal text li (case sensitive)

Positive Lookahead(?=[^>]*\bclass="([^"]+)")

Negated Character Class[^>]*

*matches any number of characters outside the set below:

>the literal > (62₁₀ / 76₈ / 3E₁₆)

\ban ASCII word boundary

class="the literal text class=" (case sensitive)

Group 1([^"]+)

Negated Character Class[^"]+

+matches at least one character outside the set below:

"the literal " (34₁₀ / 42₈ / 22₁₆)

Positive Lookahead(?=(?:[^>]*\bdata-\w+="([^"]+)")?)

Non-Capturing Group(?:[^>]*\bdata-\w+="([^"]+)")?

?repeats the group contents below at most once:

Negated Character Class[^>]*

*matches any number of characters outside the set below:

>the literal > (62₁₀ / 76₈ / 3E₁₆)

\ban ASCII word boundary

data-the literal text data- (case sensitive)

\w+any word character, repeated at least once

="the literal text ="

Group 2([^"]+)

Negated Character Class[^"]+

+matches at least one character outside the set below:

"the literal " (34₁₀ / 42₈ / 22₁₆)

Global pattern flags

g modifier: global. Finds all matches instead of stopping after the first

m modifier: multiline. Causes ^ and $ to match the start and end of each line, not only the start and end of the string

Search reference

Regular Expression

<(?:div|ul|li)(?=[^>]*\bclass="([^"]+)")(?=(?:[^>]*\bdata-\w+="([^"]+)")?)

New

With preg_match_all I want to get class and data-attributes in html.

I asked a similar question before. The correct answer to the previous responsibility was done with DOM. But as an alternative to the DOM structure, I also need a regex version.

The pattern works fine. However, if the lines are side-by-side, they also take class names from tags that should not be accepted.


<div class="noproblem"> 
    <ul class="noproblem" data-ss="1">
        <li class="noproblem" data-ss="1">
            <!-- <i> is not my tag. but there s no problem with that. because it s underneath . -->
            <i class="no_problem"></i>
        </li>
    </ul>
</div>

<div class="noproblem" data-ss="1">  <!-- problem: data-ss is not accepted -->
    <ul class="noproblem" data-ss="1">
        <!-- <i> is not my tag. my tags:  div|ul|li . -->
        <li class="noproblem"><i class="this_is_problem"></i>
        </li>
    </ul>
</div>

<div class="noproblem">
    <ul class="noproblem">
        <!-- <i> is not my tag. my tags:  div|ul|li . -->
        <li class="noproblem"><i class="this_is_problem"></i>
        </li>
        <!-- <span> is not my tag. my tags:  div|ul|li . -->
        <li class="test"><span class="this_is_problem"></span></li>
        <!-- (li class empty version): <span> is not my tag. my tags:  div|ul|li . -->
        <li><span class="this_is_problem"></span></li>
    </ul>
</div>