CSSの特定のクラスがどのHTMLで使われているかを正規表現で抽出する

下記、"active"の部分を任意の文字列に変えると、HTML内のどこに、指定したCSSがあるのかを探すことができる。

class((?:\s|")?)(.*?)((?:\s|")+)active((?:\s|")+)(.*?)((?:\s|")?)

下記は検証用マークアップ。class内にあるactiveという文字列と完全一致したものを探せる。

active-goodやid内にあるactiveなどにはマッチしない。

<div class="container">
    <h1 id="main">テスト</h1>
    <p>コンテンツ文章</p>

    <ul>
        <li class ="list">Good</li>
        <li class="list">1</li>
        <li class= "list active">Active</li>
        <li class="list">Not active</li>
        <li class="list">リンク文字</li>
    </ul>

    <ol>
        <li class="active good active-good"><a href="">声</a></li>
        <li><a href="" class=" active test">active</a></li>
        <li><a href="active">2XXL</a></li>
    </ol>
</div>
<footer>
    <nav>
        <ul>
            <li>1</li>
            <li class="root-active active">2</li>
            <li>3</li>
            <li id="foot active" class = "lists list active">4</li>
            <li>5</li>
        </ul>
    </nav>
</footer>

※エディタ内検索機能で使う前提