LoginSignup
0

More than 3 years have passed since last update.

Deno で HTML をパースし DOM を走査する

Posted at

Parsing HTML in Deno

Deno は標準では DOM をサポートしていませんが、DOM を扱えるようにするライブラリが公開されています。

ところが、ドキュメントが Node.js 用のままであったり不親切だったので、初めて使うと戸惑いました… (汗) 。

1. 使うライブラリ

Deno 用:

オリジナル:

2. ソースコード

いずれのライブラリも、Deno 用はしっかりした CDN では公開されていないため、GitHub からソースコードを直接ダウンロードするか、githack.com のような非公式の WEB サービスを利用して import します。

Deno では TypeScript を利用できますが、ここでは JavaScript で記述しています。

main.js
import { Parser } from 'https://rawcdn.githack.com/tbjgolden/deno-htmlparser2/01b2d3da3911a9d3dc134f4b68b230da5c39c5f3/htmlparser2/index.ts';
import { DomHandler } from 'https://rawcdn.githack.com/DenoBRComunitty/domhandler/5562474d5bd8d78f932fdf1df3c0ebbba50de3c0/mod.ts';
import { getText, getElementById } from 'https://rawcdn.githack.com/DenoBRComunitty/domutils/581a32557fda430c0d9ebc167f0cb4cb7414f55d/mod.ts';

// 
const parse = html => new Promise((resolve, reject) => {

    const handler = new DomHandler((error, dom) => {
        if ( error ) {
            reject(error);
        } else {
            resolve(dom);
        }
    });

    const parser = new Parser(handler);
    parser.parseComplete(html);

});

// 
const dom = await parse('Xyz <script id="test">const foo=\'<<bar>>\';</script><!--<!-- Waah! -- -->');

console.log(getText(getElementById('test', dom)));

// 出力: const foo='<<bar>>';

DOM の走査は domutils を使用します。

domutils はオブジェクトのメソッドではなく静的な関数として機能が提供されているため、メソッドチェーンでなく括弧で囲っていく形になります (少し残念) 。

domutils で利用可能な関数は以下のページで確認できます。

参考「fb55/domutils/docs/README.md - GitHub

Web API の全ての機能が利用できるわけではありません。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0