【JavaScript】ソースコード内ドメイン(ホスト名)抽出ツール

はじめに

HTMLやJavaScriptのソースコードの中からドメイン(ホスト名)を抽出するJavaScriptです。ソースコードにどんなドメインが含まれているのか知りたい時に。

《 もくじ 》
■ ツールのサンプル
■ 使い方
■ HTMLコード
■ JavaScriptコード

■ ツールのサンプル

【JavaScript】ソースコード内ドメイン(ホスト名)抽出ツール
https://text.sakura.ne.jp/memo/tool-javascript/20221117/

■ 使い方

① フォームに調べたいソースコードを入力
② ｢抽出する｣ボタンを押す
③ ソースコードから抽出された｢ドメイン(ホスト名)｣の一覧が表示される

■ HTMLコード

<form>
<p><textarea id="input" rows="10" cols="100" placeholder="ソースコードを入力"></textarea></p>
<p><input id="clickBtn" type="button" value="ドメイン(ホスト名)抽出する"> <input type="reset" value="リセット"></p>
<p><textarea id="output" rows="20" cols="100" placeholder="結果が出力されます"></textarea></p>
</form>

■ JavaScriptコード

window.onload = function() {

// [実行] ボタンクリック時に実行
const clickBtn = document.getElementById("clickBtn");
clickBtn.addEventListener("click", event => {

// [取得] テキストエリア内の文字を取得 (id="input")
let str = document.getElementById("input").value;

// [分岐] 取得した文字の中にドメインがある場合
// [ 例 ] "example.com"、'example.com'、/example.com/、%2Fexample.com%2F、\/example\.com\/
if (str.match(/(\"|\'|\/|\%2F)([0-9a-zA-Z\.\-]|\\\.|\\\-)+(\\)?\.[a-zA-Z]+(\\)?(\"|\'|\/|\%2F)/g)) {

// [作成] 配列を作成＆検索にマッチする文字を配列に格納
str = str.match(/(\"|\'|\/|\%2F)([0-9a-zA-Z\.\-]|\\\.|\\\-)+(\\)?\.[a-zA-Z]+(\\)?(\"|\'|\/|\%2F)/g);
// [変換] 配列を文字列に変換
str = str.join(",");
// [削除] ドメイン前後の記号を削除 
str = str.replace(/\\/gim, "").replace(/\"/gim, "").replace(/\'/gim, "").replace(/\//gim, "").replace(/\%2F/gim, "");
// [変換] 文字列を配列に変換
str = str.split(",");
// [削除] 重複するドメインを削除
str = Array.from(new Set(str));
// [削除] ドメインでないもの削除 (拡張子など削除)
str = str.filter(item => (item.match(/^[0-9a-zA-Z\.\-]+\.(asp|aspx|atom|cgi|css|eot|exe|gif|htm|html|ico|jpeg|jpg|js|json|ogg|otf|php|png|rdf|svg|swf|tif|ttf|txt|webmanifest|webp|wmv|woff|xml|zip|alpha|android|appl|assign|body|change|clicked|client|close|code|comment|controls|cookies|count|custom|dh|dir|disabled|dom|dtd|element|enabled|entries|error|faq|fexp|fill|find|from|generic|header|hide|href|icon|includes|init|item|iterator|key|keys|keyword|keywords|label|length|list|load|loading|login|map|mm|mobile|mpegur|navigation|onload|params|password|phone|prod|script|ss|sso|start|terms|tgz|title|token|tokens|url|value|values|version|versionl|vflset|volume|webkit|wide|width|write|[a-zA-Z]{1})$/)) == null);
// [削除] ドメインでないもの削除 (英語の大文字小文字が混ざった拡張子など削除)
str = str.filter(item => (item.match(/^[0-9a-zA-Z\.\-]+\.(?=.*?[A-Z])[a-zA-Z0-9]+$/)) == null);
// [削除] ドメインでないもの削除 (先頭がドットの文字を削除)
str = str.filter(item => (item.match(/^(\.).+$/)) == null);
// [削除] 一部のドメインを除外
str = str.filter(item => (item.match(/^(www\.w3\.org|schema\.org|api\.w\.org|ogp\.me)$/)) == null);
// [変換] 配列を文字列に変換、ドメインを縦に並べる
str = str.join(",").replace(/\,/gim, "\n");
// [表示] 該当ゼロの場合のメッセージ
str = str.replace(/^$/gim, "ドメインが見つかりませんでした。");

document.getElementById("output").value = str;

// [分岐] 取得した文字の中にドメインが無い場合
} else {

// [表示] 該当ゼロの場合のメッセージ
str = "ドメインが見つかりませんでした。";

document.getElementById("output").value = str;

}

});

};

《 JavaScriptの動きの流れ 》
① ユーザーがボタンを押した時に実行スタート
② テキストエリアに入力された文字を取得
③ ドメイン(ホスト名)が含まれているかチェック
④ ドメイン(ホスト名)を配列に格納
⑤ ドメイン(ホスト名)と無関係な文字列を削除
⑥ ドメイン(ホスト名)の一覧を表示
⑦ ドメイン(ホスト名)が無い場合は『ドメインが見つかりませんでした。』を表示

■【関連情報】JavaScript関連記事

このnoteには、他にも｢JavaScript関連記事｣があります。

【JavaScript】データURIスキームにクエリ文字列を追加＆取得する方法
https://note.com/text_sakura/n/naf0fbceb94f4
【JavaScript】TinyURLでiPhoneのブクマを共有
https://note.com/text_sakura/n/naf5404d50a3f
【JavaScript】｢西暦｣を｢和暦｣に変換＆表示(例:1976年→昭和51年)
https://note.com/text_sakura/n/n4629971e7ba7
【JavaScript】文字を置換して暗号を作成(例:hello⇔khddb)
https://note.com/text_sakura/n/n727601f0ef83
【JavaScript】｢フォーム入力文字｣を｢URLの#以降(hash)｣に表示
https://note.com/text_sakura/n/nfc4b5bda1dcc

#私の作品紹介 / #プログラミング初心者

（text）

◇　　◇　　◇

《 過去に作成したnoteの記事リスト 》
https://note.com/text_sakura/n/na2cd73291236

《 記事についてのお問い合わせ先 》
text.sakura.note@gmail.com
※ 添付ファイルが含まれるメールは受け取ることができません。
※ テキストのみでお願いいたします。