正規表現で class 属性に特定のクラス名が含まれているかを検索する方法

はじめに

HTML の要素には class="main m list" のように、複数のクラスが空白区切りで指定されることがよくあります。
このとき「m というクラスが含まれている要素」を正規表現で検索したい場合、単純に class=".*m.*" と書くと 部分一致の誤検出 が起きる可能性があります（例: class="main" もマッチしてしまう）。

そこで活用できるのが、次の正規表現です。

1

class\s*=\s*["'][^"']*\bm\b[^"']*["']

正規表現の分解

1. class\s*=\s*

class= を探す部分です。
= の前後にスペースが入っている場合も考慮して \s* を入れています。

2. ["']

class 属性の値は " か ' で囲まれているため、両方に対応します。

3. [^"']*

引用符の中に含まれる文字列を「一旦すべて」許可します。
ただし、閉じカッコの " や ' が来るまで。

4. \bm\b

ここがポイントです。\b は「単語境界」を意味し、前後が空白や記号で区切られていることを保証します。
そのため、class="main" にはマッチせず、class="m" や class="main m list" にだけマッチします。

5. [^"']*["']

再び残りの文字列を許可し、最後に引用符で閉じられていることを確認します。

実際の動作例

1
2
3
4
5
6
7

<!-- マッチする -->
<div class="main m list"></div>
<div class="m"></div>

<!-- マッチしない -->
<div class="main"></div>
<div class="mark"></div>

まとめ

この正規表現を使えば、class 属性に複数クラスが指定されている中から、特定のクラス名（例: m）だけを 誤検出せずに検索 できます。

汎用的に使いたい場合は、\bm\b の部分を他のクラス名に置き換えれば OK です。

1

class\s*=\s*["'][^"']*\b任意のクラス名\b[^"']*["']

これで HTML コードの検索やテストで「特定のクラスを含む要素」を効率よく見つけることができます。