HTMLの中からaタグ・imgタグのリンクだけを抽出するツールを作った【JS】

2018-08-04
html5javascriptdomparser
    

目次

概要

HTMLの中からaタグ・imgタグのリンクを抽出するツールを作りました。 a href抽出 2018080418_domparse1.png img src抽出 2018080418_domparse2.png HTMLテキストをコピペするとaタグ・imgタグのリンクを抽出します。 pythonのスクレイピング関連ツール(bs4)とかを使えば、 簡単にパースをすることができると思いますが、 フロントの機能だけで(JSのみで)成り立つのがメリットかと思います。

デモ

https://jsfiddle.net/s_yoshiki/m3uboag5/

DomParserの紹介

DOMParser - Web API インターフェイス | MDN xml html svgなどをパースします。

DOMParser の生成

parser.parseFromString()を使うことでdocumentオブジェクトを返り血として受け取ることができます。 つまり、 getElementById()などが使えるということです。 document - Web API インターフェイス | MDN

var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
// SVGDocument でも HTMLDocument でもなく、Document が返る

parser = new DOMParser();
doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
// SVGDocument (Document) が返る

parser = new DOMParser();
doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
// HTMLDocument (Document) が返る

aタグLinkの取得

以下の方法でリンクを取得できます。

Array.from(doc.links, (e) => {
    return e.getAttribute("href").toString()
})

document.links - Web API インターフェイス | MDN

Array.from(doc.images, (e) => {
    return e.getAttribute("src").toString()
})

document.images - Web API インターフェイス | MDN

ソース

HTML

<!--
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script> -->
<header>
  <div class="container">

    ## html Parser

    <span>htmlをパースします</span>
  </div>
</header>

<main>
  <div class="container">
    <div>
      <textarea class="form-control" id="text"><html>
<body>
    <div>
        <p id="hello">
            Hello World!
        

        <a href="http://hoge.co.jp"></a>
    </div>
</body>
</html>
</textarea>
    </div>

    <div>
      <div>
        <select name="horoscope" class="form-control" id="select">
          <option value="1">a - href</option>
          <option value="2">img - src</option>
        </select>
      </div>
      <div>
        <label class="radio-inline"><input type="radio" name="format" id="type:json" checked> JSON </label>
        <label class="radio-inline"><input type="radio" name="format" id="type:csv"> CSV </label>
      </div>
    </div>
    <div align="right">
      <button class="btn btn-primary mb-2" id="run">
        run
      </button>
    </div>

    <div>
      <textarea class="form-control" id="result"></textarea>
    </div>
  </div>
</main>

<footer>
  <div class="container">

    <div style="font-family: Impact;">html Parser</div>hmtlをパースします
  </div>
</footer>

JS

(() => {
  "use stricts"

  document.getElementById("run").addEventListener("click", () => {
    try {
      let src = document.getElementById("text").value
      let parsed_obj = getParsedObject(src)

      let type_csv = document.getElementById("type:csv").checked
      let dst = {}
      let mode = document.getElementById("select").value

      if (mode === '1') {
        dst = getHrefs(parsed_obj)
      } else if (mode === '2') {
        dst = getImgSrcs(parsed_obj)
      }

      if (type_csv) {
        document.getElementById("result").value = putList(dst)
      } else {
        document.getElementById("result").value = JSON.stringify(dst)
      }

    } catch (e) {
      alert(e)
    }
  })

  function getParsedObject(str_html) {
    let parser = new DOMParser()
    let doc = parser.parseFromString(str_html, "text/html")
    return doc
  }

  function getHrefs(doc) {
    return Array.from(
      doc.links,
      (e) => {
        return e.getAttribute("href").toString()
      }
    )
  }

  function getImgSrcs(doc) {
    return Array.from(
      doc.images,
      (e) => {
        return e.getAttribute("src").toString()
      }
    )
  }

  function putList(src) {
    var result = ""
    src.forEach((e) => {
      result += e + "\n"
    })
    return result
  }
})()

何かしら役に立つ場面はあると思います。

参考

    

関連記事

homebrewでnodejsインストール&任意のバージョン利用
初めに homebrewインストール nodejsの検索 インストール nodejsの利用 初めに homebrewでサクッとnodejsのインストールを行なった際のメモです。 環境はMacを対象としていますが、Linux…

[Vue]フロントエンド機能のみでダウンロードを実装する[JS]
実装 ポイント ソース デモ 参考サイト フロントエンドのみ(=サーバサイドがダウンロードさせない) でダウンロードを行う機能を実装した時のメモです。 Vueを利用して実装していますが、ここで記載しているコードはVueに依存した機能ではなく、ピュアなJSのAPI…

Node.js で作成した REST API を Docker化
Node.jsでREST APIを作成 コンテナ化 コンテナ化定義 コンテナ化作業 参考 Node.js で作成した REST API を Docker化した際のメモです。 Node.jsでREST APIを作成 まずはNode.js…

JavaScriptで優先度付きキューを実装する
優先度付きキューについて ソース 参考 JavaScriptで優先度付きキュー (プライオリティキュー) を実装する 優先度付きキューについて 具体的には次のような機能があります。 キューに対して要素を優先度付きで追加 (push…

next_permutationをJSで実装する
ソース 使い方 参考 C++で提供されている順列を生成する next_permutation のJS実装です。 ソース 順列が存在する場合はtrueを返し、そうでなければfalse…

[JS]ラジアンから度数に度数からラジアンに変換する
コード 度数からラジアンへ ラジアンから度数へ サンプル ラジアンから度数に度数からラジアンに変換する際のスニペット。 コード 度数からラジアンへ ラジアンから度数へ サンプル

JS/TSのclassでclass名を取得する
コード JS/TSのconstructorを利用して自分自身のクラス名を取得する際のメモ。 コード このコードの結果は次のようになります。

JSで32ビット符号付き整数に対してのビット演算でハマった
具体例 参考にしたサイト JSでサブネットマスクの計算を行おうとしたとき、ビット演算でハマりました。その時のメモです。 JSでサブネットマスクの計算 JSでビット演算子を利用する場合 3…

JSでIPアドレスがサブネットマスクで指定した範囲内にあるか判定する
IPアドレスが指定した範囲内にあるかどうか判定 参考にしたサイト JSでIPアドレス(IPv4)が指定したサブネットの範囲に含まれるか判定するロジックを作った時の記録です。 IPアドレスが指定した範囲内にあるかどうか判定 処理としては、IP…

プログラムの数値計算で発生する誤差の種類 丸め誤差・打ち切り誤差・桁落ち
はじめに 誤差の種類 丸め誤差 打ち切り誤差 桁落ち 情報落ち 桁溢れ誤差 参考にしたサイト コンピュータで出てくる誤差はいくつかありますが、 それらをコードに落として整理しました。 はじめに 例えば の計算の答えは 0.6666666666…

最新の投稿

[Mac]ipコマンドの導入[iproute2mac]
iproute2macについて 導入 homebrewで導入 直接インストール 確認 サポートコマンド を導入して、macOSでipコマンドを導入した際のメモ iproute2macについて brona/iproute2mac: CLI wrapper for…

AutotoolsでconfigureやMakefileの作成
はじめに Autotools 環境 準備 ツール類のインストール ソースコードの作成 configure.ac と Makefile.am configure Makeの生成 その他 makeオプション autoreconf について Perlの場合 リンク はじめに C…

RPMパッケージ作成 Dockerを利用して
はじめに RPMパッケージ step1.環境構築からRPMパッケージングまで 事前準備 ワークスペースの作成 プログラム配置 specファイル rpmbuild インストール リンク はじめに Dockerを利用してRPM開発環境を用意し、実際にRPM…

RPMのspecファイルで利用するマクロ・変数
はじめに マクロ一覧 基本情報系 Body項目 コメント 参考文献 はじめに RPM(Fedora/CentOS系)を作成する際に利用するspecファイルで利用できるマクロについて調べた際のメモです。 マクロ一覧 基本情報系 パッケージの名前を定義します。これはspec…

CentOS8/RHEL8でのRPM管理における検討事項
初めに 前提 rpm rpm yum dnf コマンド リポジトリ リポジトリとライフサイクル AppStream Compatibility Level について AppStreamのサポート期間 Yum v3 -> Yum v4 リンク 初めに CentOS8/RHEL…

homebrewでnodejsインストール&任意のバージョン利用
初めに homebrewインストール nodejsの検索 インストール nodejsの利用 初めに homebrewでサクッとnodejsのインストールを行なった際のメモです。 環境はMacを対象としていますが、Linux…

tracerouteコマンドでネットワークの経路を洗い出す
tracerouteの用途 tracerouteの原理 IPヘッダのTTL コマンドを実行してみる 参考文献 tracerouteコマンドでネットワークの経路を洗い出した際の操作をメモしました。 環境はmacで実施しています。 また、traceroute…

[Vue]フロントエンド機能のみでダウンロードを実装する[JS]
実装 ポイント ソース デモ 参考サイト フロントエンドのみ(=サーバサイドがダウンロードさせない) でダウンロードを行う機能を実装した時のメモです。 Vueを利用して実装していますが、ここで記載しているコードはVueに依存した機能ではなく、ピュアなJSのAPI…

Node.js で作成した REST API を Docker化
Node.jsでREST APIを作成 コンテナ化 コンテナ化定義 コンテナ化作業 参考 Node.js で作成した REST API を Docker化した際のメモです。 Node.jsでREST APIを作成 まずはNode.js…

JavaScriptで優先度付きキューを実装する
優先度付きキューについて ソース 参考 JavaScriptで優先度付きキュー (プライオリティキュー) を実装する 優先度付きキューについて 具体的には次のような機能があります。 キューに対して要素を優先度付きで追加 (push…

Tags

Dates

s-yoshiki
s-yoshiki
githubtwitterqiita
ただの備忘録です。
JS/TS/node.js/PHP/AWS/OpenCV/CentOS
※このブログの内容は個人の見解であり、所属する組織等の見解ではありません。
© 2022   404 motivation not found