JavaScriptで同一ドメイン内のHTMLで構成されたページの特定のタグを全て取得する方法

ハーゲンダッツのメープルカスタードクッキーにハマっています、網干です。

ハーゲンダッツの期間限定商品は時折ハマってしまうんですよね…。
パッケージを見て「これはおいしそう！」と思った商品は高い確率で期間内に何度も購入しています。
普段はアイスを食べない方なのですが、どうもハーゲンダッツの魅力にだけは負けてしまいます…。

皆様もメープルカスタードクッキーを食べてみましょう！すこぶるオススメです！
http://www.haagen-dazs.co.jp/products/minicup/maple-custard-cookie.html

さて、今回はJavaScriptを使って同一ドメイン内のHTMLで構成されたページの特定のタグ(今回はimgタグのみ)を全て取得するプログラムを紹介します。

WebサイトがWordPress内で完結している場合はWordPressの関数で何とかなってしまうのですが、WordPressの外にあるHTMLのページの情報を取得するのはなかなか難しいんですよね…。

方法はいろいろとあると思うのですが、今回はJavaScriptを使って特定のタグを抜き取ってしまいます！

今回のブログの見出しはコチラです！

1 JavaScriptで同一ドメイン内のページのimgタグを全て取得する
2 HTMLソースコードを取得した結果
3 動作環境
4 最後に

JavaScriptで同一ドメイン内のページのimgタグを全て取得する

まず初めに、このプログラムは同一ドメイン内のページにしか対応していないことに注意してください。
例えば、これから紹介するプログラムを”http://example.com”のドメインのページに設置した場合は”http://example.com/page1.html”のHTMLコードを取得することは可能です。
しかし、プログラムを”http://example.com”のドメインのページに設置して”http://www.yahoo.co.jp/”のHTMLコードを取得することはできません。
これは、今回のプログラムで使用するXMLHttpRequestの仕様で外部ドメインのコード取得が不可能になっているため、取得ができません。

では早速、下記にコードの一式を記載します。

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>

imgタグ取得プログラム

<!--

// 変数初期化

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>

重要な箇所は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