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
  }
})()

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

参考

    
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

関連記事

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

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

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

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

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

JSでサブネットマスクの計算
JSによるサブネットマスク関連の計算 IPv4アドレス文字列をNumber型に変換する CIDR と サブネットの相互変換 ネットワークアドレス と ブロードキャストアドレス クラス 改めて計算方法を整理する 参考にさせていただいたサイト JSでIPv…

AWS Amplify に Next.js (SSG) で作ったアプリをデプロイする
はじめに 操作 Next.js (React) アプリの作成、Gitへのプッシュ AWS Amplifyでプロジェクト作成 参考にしたサイト この記事では、React / Next.js アプリケーションを作成し、AWS Amplify…

Typescriptに入門した
初期作業 とりあえずHello World 初期作業 typescript環境を作っていきます。 とりあえずHello World まず、次のサンプルコードを作成します。 typescriptファイルをビルドします。

Vue/Nuxt.js 触ってた人が Next.js に入門する
はじめに 実施環境 学習ガイド Create a Next.js App Navigate Between Pages ページの作成 リンク Assets, Metadata, and CSS Assets メタデータ CSS…

10進数から2進数 2進数から10進数への変換 JavaScript
10進数から2進数 2進数から10進数 テスト 10進数から2進数、2進数から10進数への変換を行うJavaScriptのコードの紹介。 JSの場合、10進数から2進数への変換はメソッド。2進数から1…

最新の投稿

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

CentOS8 に Python + OpenCV をインストール
インストール テスト CentOS8 で標準で提供されているパッケージで Python + OpenCV 環境を構築する方法です。 検証した環境は CentOS8.3 (Docker) です。 インストール まず opencv…

[Perl] CentOS8 に plenv をインストール
インストール Step1 事前準備 Step2 PATHを通す (README通りにインストール) Step2 PATHを通す ($HOME以外にplenvをインストール) Step3 Perlインストール Step4 cpanmインストール CentOS…

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

CentOS6(Docker)でyum update できなくなった
エラー内容 対応 CentOS6.10 で yum update しようとしたところエラーが出てアップデートできなかったので対応した時の記録 エラー内容 以下のようなエラーが出ました。 対応 を以下のように変更したところ解決しました。

PostfixでメールリレーしてMailHogで受信する開発用Dockerコンテナの構築
環境 Dockerイメージ作成 コンテナの起動 telnetで送信テスト phpで送信テスト Postfixのリレーを介して送信されたメールをMailHog(開発用SMTPサーバ)でキャッチするDocker開発環境を構築した際のメモです。 環境 Docker…

GitLab.com のコンテナレジストリで1つのプロジェクトに複数のDockerイメージをpushする
手順 GitLab.com のコンテナレジストリで1つのプロジェクトに複数のDockerイメージをpushする方法についてのメモです。 手順 まず、gitlab.comにて適当なリポジトリを…

Python poetryでパッケージ開発 PyPIで公開 Pytestでテスト CIをGitHub Actionsで回す
Poetry でパッケージ開発 pytest でユニットテストを実施しカバレッジを算出する パッケージをビルドし PyPI で公開する 検証環境にデプロイする 本番環境にデプロイする GitHub Actions で CI を回す codecovの設定 GitHub…

Perlでconstant(定数)をhashのキーに使う
ハマった事象 解決方法 1 括弧をつける 2 & をつける 参考にしたサイト Perlでconstant(定数)をhash…

php-fpmのステータスページを表示 Apache & htaccess
試した環境 php-fpm の pm.status_path について php-fpmのconfの設定 .htaccess の設定 アクセスしてみる 参考にしたサイト Apache環境で php-fpm のステータスページを htaccess…

Tags

Dates

© 2021   404 motivation not found