正規表現 - 文字列内から HTML タグを正確に判別！

使っているプログラミング言語に関わらず、文字列内から HTML タグの部分を抽出したり削除したりするケースがあると思います。

その際、正規表現を使用すると思いますが、場合によっては確実に HTML タグを判別できない場合があります。

結局、広く知れ渡っている正規表現パターンが正確に判別できますが、他のパターンも含めて数種類のパターンを Ruby で検証してみました。（正規表現の説明付きで）

0. 準備

今回のテストでは、以下のような文字列を考えてみることにする。
文字列をダブルクォーテーション " で囲んだり、シングルクォーテーション ' で囲んだり、タグの属性値内にさらにタグを埋め込んだりしている。

この画像<img src="../images/example.png" alt='example.png' title='<img>タグ例' />は<span>テスト画像</span>です。

そして、テストはこの文字列から HTML タグを判別して除去することにする。
以下のような文字になれば成功ということ。

この画像はテスト画像です。

1. テストパターン１（不正確なパターン）

<.*?>

• . は、改行を除く任意の１文字。
• * は、直前の表現の０回以上の繰り返しだが、 *? とすることでさらに最短一致。

よって、 < と最初の > で囲まれた任意の０文字以上の文字列のこと。

2. テストパターン２（不正確なパターン）

<\/?[^>]*>

• \/ は、 / 文字そのもの。 / だけだと別の意味なるのでエスケープしている。
• ? は、 直前の正規表現の 0 または 1 回の繰り返し。
• [ ] は、文字クラス指定。 [ ] 内に列挙したいずれかの１文字。
• ^ は、 [ ] 内の先頭にあれば、 [ ] 内に列挙されている指定文字以外の１文字。
• * は、直前の表現の０回以上の繰り返し。

よって、< と > で囲まれ、 < の次に / が０個か１個で、残りが > 以外の文字列のこと。
言い換えれば、「テストパターン１」の <.*?> と同じになる。

3. テストパターン３（正確なパターン）

<("[^"]*"|'[^']*'|[^'">])*>

• ( ) は、正規表現のグループ化。
• | は、選択（OR）。
• "[^"]*" は、 " と次の " で囲まれた部分という意味。
  これは、この部分を１つのかたまりとみなすため。
• '[^']*' は、 ' と次の ' で囲まれた部分という意味。
  これは、この部分を１つのかたまりとみなすため。
• [^'">] は、 ", ', > 以外の１文字。
  " と " で囲まれた部分や ' と ' で囲まれた部分を１つの固まりとみなしているのに、さらに " や ' が存在した場合は HTML タグではない。
  また、 > を除去するのは最短一致させるため。

4. テストパターン４（正確なパターン）

<(".*?"|'.*?'|[^'"])*?>

これは「テストパターン３」の正規表現を書き換えただけのものなので、これも正確に HTML タグを判別できる。

5. 検証用 Ruby スクリプト

上記の「テストパターン１」〜「テストパターン４」をテストする Ruby スクリプトは以下の通り。

File: test_regexp.rb

# -*- coding: utf-8 -*-

str = "この画像<img src=\"../images/example.png\" alt='example.png' title='<img>タグ例' />は<span>テスト画像</span>です。"

puts "[変換前] #{str}"
puts "[パターン１（×）] #{str.gsub(/<.*?>/, "")}"
puts "[パターン２（×）] #{str.gsub(/<\/?[^>]*>/, "")}"
puts "[パターン３（○）] #{str.gsub(/<("[^"]*"|'[^']*'|[^'">])*>/, "")}"
puts "[パターン４（○）] #{str.gsub(/<(".*?"|'.*?'|[^'"])*?>/, "")}"

文字列は " と " で囲むので、文字列内の " は エスケープしている。

6. 検証実施

作成した検証用 Ruby スクリプトを実行してみる。

$ ruby test_regexp.rb
[変換前] この画像<img src="../images/example.png" alt='example.png' title='<img>タグ例' />は<span>テスト画像</span>です。
[パターン１（×）] この画像タグ例' />はテスト画像です。
[パターン２（×）] この画像タグ例' />はテスト画像です。
[パターン３（○）] この画像はテスト画像です。
[パターン４（○）] この画像はテスト画像です。

意図した結果となった。

---

他にも対応不可能なパターンがあるかも知れませんが、おそらく上記の「テストパターン３」、「テストパターン４」でほぼ確実に HTML タグを判定可能です。

また、正規表現の部分は Ruby に限らず他の言語でも応用可能です。
意外と詳しい説明（なぜそんな正規表現パターンなのかという説明）が少ないのでまとめてみた次第です。
参考になれば幸いです。

以上。