JavaScript、
リンク先urlを取得。

〽️ サイト管理に役立てましょう。




サイトからurlを拾ってくる。

こんにちは、「ふ」です。
みなさんは自分のサイト管理、どのように行っていますか？
形式はどうあれ、url一覧や内部リンクの状態は、把握できるようにしておきたいものです。

しかしながら、HTMLファイルから１つ１つ手作業でリンク先を抽出していくのは、なかなかに大変💧

自動化してしまいましょう。

ここは、JavaScriptを使って自動で抽出してしまいましょう。
今回はHTMLファイルからリンク先のurlを抽出する方法について紹介していきます。数行のコードを追加するだけで、リンク先のリストが自動で出力されるようになります。

みなさんのHTMLファイルにもコードを追加して、サイト管理に役立ててください。

href = " "の中身を取り出す。


JavaScriptでリンク先を取り出す、
やり方は簡単。

<a href = 「「５"〇〇"」」>

a要素のhref属性の値を抽出し、１つの配列に格納していくというものです。

抽出範囲を選択。


<!DOCTYPE html> <html lang = "ja"> <head> 〜 </head> <body> <nav> 〜 </nav> 「「１<div id = "area">」」 bb<a href = "https://fuuno.net">..</a> bb<a href = "https://heeno.net">..</a> bb<a href = "https://hoono.net">..</a> 「「１</div>」」 </body> </html>

HTMLファイル全体の中から、リンク先を抽出したい部分を<div> 〜 </div>で囲んでおきましょう。
というのも、ナビゲーション部分やフッターにおいては各ページ共通のリンクが並べられていることが多いかと思われます。それらのリンク先を抽出しても、「リンク情報」としてはあまり意味がないからです。

サンプルではid名を「area」としました。その中には３つのリンク先が置かれています。

JavaScript。

それではJavaScriptで、リンク先をまとめた配列を作っていきます。コードは抽出したい部分よりも後ろに記述するようにしてください。

「「３//検索範囲のHTMLを取得」」「「１ ..@1@」」 let area = document.getElementById("area") 「「３//a要素を全て取得」」「「１ ..@2@」」 let anchors = area.querySelectorAll("a"); 「「３//配列を生成」」「「１ ..@3@」」 let anchorArr = []; 「「３//すべてのa要素のhref属性の値を配列に追加」」「「１ ..@4@」」 for(a of anchor) { anchorArr.push(a.getAttribute("href")) }

@1@ 先ほど「#area」で囲んでおいた範囲を取得します。

@2@ 範囲内のa要素を取得。

@3@ 結果を格納する配列を生成。今は空の状態です。

@4@ for of文とgetAttributeメソッドを使い、a要素のhref属性の値を配列に格納していきます。



console.log(anchorArr); 「「１▶︎ (3) ['https://fuuno.net', 'https://heeno.net', 'https://hoono.net']」」

配列を出力してみると、リンク先のurl一覧が表示されました。

簡単に考えるべきでした。


最後までお読みくださり、ありがとうございます。

HTMLコード内にある「リンク先のurlを取得」となると正規表現を使った方法が浮かびます。
しかしそれでは、リンク先ではない外部読み込みコードやimgの参照先なども抽出されてしまい、それらから更に正規表現を使って絞り込んでいく....という作業が発生してしまいます。

しかしよくよく考えてみると、何のことはない。a要素からhref属性を取り上げれば良いだけのことでした。物事を難しく考えてしまう「ふ」の悪いクセです、ふふふ。

ではまた〜 ♪



JavaScript、乱数の範囲や重複を指定〜Math.random使い方。

2021.11.17
整数/範囲/重複の有無を自在にあやつろう。

JavaScriptコードの「？」をまとめたページはこちら⬆︎。









「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。