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

Parsing HTML in Deno

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

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

1. 使うライブラリ

Deno 用：

• tbjgolden/deno-htmlparser2 - GitHub
• DenoBRComunitty/domhandler - GitHub
• DenoBRComunitty/domutils - GitHub

オリジナル：

• fb55/htmlparser2 - GitHub
• fb55/domhandler - GitHub
• fb55/domutils - GitHub

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 の全ての機能が利用できるわけではありません。