HTMLタグを一括削除してキレイにする方法。正規表現を使えば簡単。

先日コピーできないサイトのHTMLをコピペする方法を紹介しましたが、このコピペしたHTMLソースからタグを全部一括削除したい時があります。
「正規表現」という検索方法が使えるテキストエディタがあれば簡単にできるのでその方法を紹介。

正規表現でHTMLタグを一括削除

正規表現でHTMLタグを一括削除

HTMLソースだけだとなかなか読みづらいですよね。本当はテキストだけ欲しいのに・・・という時にHTMLソースからタグを一括削除する方法です。
準備するものは「正規表現」が使えるテキストエディタです。

正規表現が使えるテキストエディタ

僕は普段テキストエディタは「秀丸」を使っています。
秀まるおのホームページ(サイトー企画)－秀丸エディタ

それ以外にも色々あるようですね。

Windows

サクラエディタ
 「Mery」プラグインやマクロに対応するフリーの高機能テキストエディター – 窓の杜ライブラリ
 EmEditor (テキストエディタ) – Windows用テキストエディター

Mac

CotEditor -Text Editor for macOS

正規表現でHTMLタグを一括削除してみる

今回は秀丸でやってみます。サンプルになるHTMLは、このサイトのトップページでやってみましょう。
ブラウザからHTMLソースを表示させてテキストエディタにコピペしたところ。タグがハイライトされていますがこれでも読みづらいですね。

秀丸の検索置換機能で正規表現を指定します。
こんな感じ。

この時、正規表現を使うオプションをオンにして、検索文字列のところに

<[^>]+>

と入力して、置換のところはブランクにします。これが正規表現で、[や^、+は意味を持っています。ちょっとだけ解説するとこんな感じ。

パターン	意味
[^	^は否定を表していて、[]はこの間に入れた文字のいずれか、を意味します。今回の場合は「＞以外の」という意味になっています。
+	直前の正規表現を1回以上繰り返す、という意味。

つまり左から「＜」のあとに「＞じゃない文字」の「1回以上の繰り返し」があって「＞」で終わる文字列を検索してね、という表現。一応これでHTMLタグは大体マッチするはず。ただ他の表現もあって、

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

としているサイトもありました。結構複雑ですね・・・。タグの属性が”（ダブルクオーテーション）でも’（シングルクォーテーション）でもいいように、という事だと思いますが、最初のやつでもこれまであまり困ったことはないです。

これで全置換をしてみると・・・？

できました。結果はこんな感じ。

ちゃんとテキストだけになりましたね！左側に見える点々みたいなのはタブ、行の最後の「↓」は改行です。

せっかくなのである程度整形してみる

まぁこれでHTMLタグは一括削除できましたが、まだ読みづらいので正規表現を使いながら整形しちゃいましょう。

タブの削除

まずはHTMLにあったネスト（入れ子）の名残のタブを全部外します。正規表現ではタブは「\t」なのでこれをそのまま削除するように指定すれば良さそうですが、上の例をみても文中にタブが入っているケースもあり、全部ブランクで置換すると場所によっては別れていたテキストがくっついちゃう可能性もありますね。ということは・・・「行頭から連続するタブを削除」してから「それ以外のタブの連続をスペースに置換」という手順にすると良さそうです。では1つ1つやってみましょう。

行頭から連続するタブを削除

正規表現のパターンはこれ。

^\t+

この最初にくる「^」は「行頭」を表しています。次の「\t」はタブを、「+」は同じくその前の文字の1回以上の繰り返し。つまり「行頭がタブでその後1回以上タブの繰り返し」を指定するパターンになります。

タブの繰り返しをスペースに変換

上の行頭からのタブを削除したら次は文中のタブを。パターンは単純です。

\t+

さっきの正規表現から最初の「^」が抜けただけですね。これを「」に置換する、という指定にすると文中にタブが入っていてもちゃんとスペースで区切られて残ります。
この2つの検索置換をした後がこんな感じ。

ここは実は正規表現のパターンよりも順番が大事で、「行頭からのタブの連続を削除」してから「タブの連続をスペースに」の順番を逆にしてしまうとほぼ全部の行頭にスペースが入った状態になるので注意です。