@mozilla/readability を使った HTML からの本文抽出

readability.md

@mozilla/readability を使うと簡単に本文を抽出することができます。これは Firefox のリーダービューで使われているもののようです。

• https://github.com/mozilla/readability
• https://support.mozilla.org/ja/kb/firefox-reader-view-clutter-free-web-pages

今回はこの結果を Claude3 に投げたかったので、DOMPurify を組み合わせて最小限文章がわかりそうな DOM として取り出しています。

• https://github.com/cure53/DOMPurify

import { Readability } from '@mozilla/readability';
import { JSDOM } from 'jsdom';
import createDOMPurify from 'dompurify';

export const getReadability = async (url: string) => {
    const content = await fetch(url).then(res => res.text());
    const reader = new Readability(new JSDOM(content, {
        url
    }).window.document);
    const readability = (reader.parse() ?? { content: '' });
    return createDOMPurify(new JSDOM('').window).sanitize(readability.content, {
        ALLOWED_TAGS: [
            'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
            'blockquote', 'code', 'pre',
            'p', 'br', 'hr',
            'a', 'img', 'table', 'thead', 'tbody', 'tr', 'th', 'td',
            'ul', 'ol', 'li',
            'dl', 'dt', 'dd',
        ],
        ALLOWED_ATTR: ['href', 'src', 'title', 'alt'],
    });
}