JavaScript の正規表現で、「否定的先読み」というパターンを使って img タグ以外のタグを全て削除する方法です。
例えば、ページの HTML の中から img タグだけを取り出したいときは、
var body = document.body.innerHTML;
var images = body.match(/<img[^>]+>/gi);
と書いたり
var body = document.body.innerHTML;
var images = body.match(/<img.*?>/gi);
と書いたりすれば、変数 images に配列として格納されます。
ただし、これだとタグの中で改行されていた場合に対応出来ないので、それにも対応する場合は下記のようになります。
var body = document.body.innerHTML;
var images = body.match(/<img(.|\s)*?>/gi);
ついでに画像の URL だけの一覧を作りたいとすれば、
var body = document.body.innerHTML;
var images = body.match(/<img(.|\s)*?>/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(/<style(.|\s)*?<\/(no)?style>/gi, '');
body = body.replace(/<(?!img)(.|\s)*?>/g, '');
document.body.innerHTML = body;
もっとコンパクトに書けるかも知れませんが、あまり複雑にするとメンテナンス時に困るのでこのくらいで。
以上です。