JavaScript の正規表現で img タグ以外のタグをタグを削除する

例えば、ページの HTML の中から img タグだけを取り出したいときは、

var body = document.body.innerHTML;
var images = body.match(/]+>/gi);

と書いたり

var body = document.body.innerHTML;
var images = body.match(//gi);

と書いたりすれば、変数 images に配列として格納されます。

ただし、これだとタグの中で改行されていた場合に対応出来ないので、それにも対応する場合は下記のようになります。

var body = document.body.innerHTML;
var images = body.match(//gi);

ついでに画像の URL だけの一覧を作りたいとすれば、

var body = document.body.innerHTML;
var images = body.match(//gi);
var imagesURL = [];
for (var i = 0, l = images.length; i < l; i++) {
 imagesURL.push(images[i].match(/src=["|'](.*?)["|']/)[1]);
}

といった感じになると思います。

ここまでは比較的シンプルですが、今日のテーマは img 要素以外のタグをすべて削除して、img 要素だけを残すにはどうしたらいいか、といった内容になります。

img 要素以外というのは、つまり「後ろに img が続かない < から最初の > まで」ということになります。

これを正規表現にすると下記のようになります。

<(?!img)(.|\s)*?>

これは「後ろに img が続かない < から最初の > まで」を表した「否定的先読み」という書き方です。否定的先読みについては、下記のページがとても分かりやすいです。

• 正規表現の先読み・後読みを極める！ - あらびき日記

では、img タグ以外を削除して、ページの内容をテキストと画像だけにしてみるには、下記のようなコードになります。

var body = document.body.innerHTML;
body = body.replace(/<(?!img)(.|\s)*?>/g, '');
document.body.innerHTML = body;

ただし、これだと script、noscript、style タグなどの中身が残ってしまうので、それらを先に削除しておいた方がいいかもしれません。

var body = document.body.innerHTML;
body = body.replace(/<(no)?script(.|\s)*?<\/(no)?script>/gi, '');
body = body.replace(//gi, '');
body = body.replace(/<(?!img)(.|\s)*?>/g, '');
document.body.innerHTML = body;

もっとコンパクトに書けるかも知れませんが、あまり複雑にするとメンテナンス時に困るのでこのくらいで。

以上です。