記事の詳細
JavaScriptで同一ドメイン内のHTMLで構成されたページの特定のタグを全て取得する方法
ハーゲンダッツのメープルカスタードクッキーにハマっています、網干です。
ハーゲンダッツの期間限定商品は時折ハマってしまうんですよね…。
パッケージを見て「これはおいしそう!」と思った商品は高い確率で期間内に何度も購入しています。
普段はアイスを食べない方なのですが、どうもハーゲンダッツの魅力にだけは負けてしまいます…。
皆様もメープルカスタードクッキーを食べてみましょう!すこぶるオススメです!
http://www.haagen-dazs.co.jp/products/minicup/maple-custard-cookie.html
さて、今回はJavaScriptを使って同一ドメイン内のHTMLで構成されたページの特定のタグ(今回はimgタグのみ)を全て取得するプログラムを紹介します。
WebサイトがWordPress内で完結している場合はWordPressの関数で何とかなってしまうのですが、WordPressの外にあるHTMLのページの情報を取得するのはなかなか難しいんですよね…。
方法はいろいろとあると思うのですが、今回はJavaScriptを使って特定のタグを抜き取ってしまいます!
今回のブログの見出しはコチラです!
JavaScriptで同一ドメイン内のページのimgタグを全て取得する
まず初めに、このプログラムは同一ドメイン内のページにしか対応していないことに注意してください。
例えば、これから紹介するプログラムを”http://example.com”のドメインのページに設置した場合は”http://example.com/page1.html”のHTMLコードを取得することは可能です。
しかし、プログラムを”http://example.com”のドメインのページに設置して”http://www.yahoo.co.jp/”のHTMLコードを取得することはできません。
これは、今回のプログラムで使用するXMLHttpRequestの仕様で外部ドメインのコード取得が不可能になっているため、取得ができません。
では早速、下記にコードの一式を記載します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
imgタグ取得プログラム <script type="text/javascript"> <!-- // 変数初期化 httpRequest = false; // IE6.0以外の「XMLHttpRequest」オブジェクトをサポートしているブラウザ? if(window.XMLHttpRequest) { // 「XMLHttpRequest」オブジェクトをサポートしている場合は下記 httpRequest = new XMLHttpRequest(); httpRequest.overrideMimeType('text/xml'); } else if(window.ActiveXObject) { // IEの場合は下記 try { httpRequest = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { httpRequest = new ActiveXObject('Microsoft.XMLHTTP'); } } function request(page) { // 指定がない? if(page == "") { return; } // リクエスト中止 httpRequest.abort(); // リクエスト初期化 httpRequest.open('GET', page, true); // テキストエリア初期化 document.getElementById('page_text').value = ""; // readyStateの値変更を監視 httpRequest.onreadystatechange = function() { // データ受信完了? if(httpRequest.readyState == 4) { // リクエスト成功? if(httpRequest.status == 200) { // HTMLソースコードを文字列で取得 var getHtmlSrc = httpRequest.responseText; // HTMLソースコード内のimgタグで囲まれた部分のみを全て抜き出す var getImgTag = getHtmlSrc.match(/<img.*?>/g); // 取得したimgタグを全て書き出す for (var i = 0; i < getImgTag.length; i++) { document.getElementById('page_text').value = document.getElementById('page_text').value + getImgTag[i] + "\n"; } } } } // リクエスト発行 httpRequest.send(null); } //--> </script> <select onchange="request(this.value);"> <option value=""></option> <!-- ここにimgタグを取得するページのURLを登録する --> <option value="http://techmemosrv.minibird.jp/">myHP</option> </select> <textarea id="page_text" style="width: 100%; height: 200px;"></textarea> |
重要な箇所はscriptタグで囲んだ部分になります。
基本的には全てコメントに記載した通りの内容になっています。
上記のプログラムをそのまま使う場合は、optionタグで指定しているURLを自身のドメインに設置しているページのURLに変更してください。
HTMLソースコードを取得した結果
実際に使ってみると、指定したページのimgタグで囲われた部分のみがテキストエリアに出力されます。
動作環境
このプログラムは下記のブラウザで正常に機能していることを確認しています。
・Google Chrome 53.0.2785.143 m (64-bit)
・Firefox 49.0.1
・Safari 5.1.7
・Microsoft Edge 38.14393.0.0
・Internet Explorer11 11.223.14393.0
最後に
いかがでしたか?
まだまだJavaScriptもimgタグを取得するのに使用している正規表現も勉強が浅いので今回はここまでが限界でした…。
もっと汎用性の高い正規表現の式が書けるようになれば、imgタグだけでなくコード内の好きな部分を抜き取ることができると思います!
…というか、本来はそれがやりたかったのですがタイムアップでした…。
いつかこのプログラムを使った発展形を記事にしたいと思います。
今回紹介したプログラムの参考にさせていただいたサイト様は下記になります。
http://webos-goodies.jp/archives/50548720.html
http://www.ajaxtower.jp/ini/http/index6.html
http://www.ajaxtower.jp/ini/http/index4.html
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest
今回はいつもより短めですが以上です!
ではまた!
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。