阿超 > readability

readability

2025-01-30

前端

我当然不会试图摘月，我要月亮奔我而来。——奥黛丽赫本

https://github.com/mozilla/readability

最近发现了一款由 Mozilla 开发的开源工具 Readability.js，这是一个专注于网页内容提取的库，它能够快速解析网页中的正文内容，过滤掉广告、导航栏等干扰信息。Firefox 的“阅读模式”正是基于 Readability.js 实现的。这款工具对于需要优化网页阅读体验、自动提取文章内容的开发者来说非常实用。

什么是 Readability.js

Readability.js 是 Mozilla 为了提升用户网页阅读体验而开发的一个工具，能够将网页上的主要内容提取出来并生成清爽的 HTML 片段。它非常适合集成到浏览器扩展、阅读器应用、内容聚合平台等项目中。

安装和使用

1. 安装

在 Node.js 环境中可以通过 npm 直接安装：

1
npm install @mozilla/readability

2. 基本使用

要使用 Readability.js 提取网页内容，只需传入一个 DOM 文档对象并调用 parse() 方法：

1
var article = new Readability(document).parse();

提取的结果包含文章标题、正文、摘要等信息。

API 参考

1. 创建 Readability 实例

1
new Readability(document, options)

可以传入一些可选参数 options 进行配置：

  • debug（默认 false）：启用调试日志输出。
  • maxElemsToParse（默认 0）：设置解析的最大元素数量。
  • nbTopCandidates（默认 5）：分析内容时的候选节点数量。
  • charThreshold（默认 500）：最低字符数量限制，内容长度不足时不会返回结果。
  • classesToPreserve：指定要保留的 HTML 类名。
  • keepClasses（默认 false）：是否保留所有 HTML 类名。
  • serializer：自定义序列化函数，默认返回 HTML 字符串。
  • disableJSONLD（默认 false）：是否禁用 JSON-LD 格式的元数据解析。

2. 解析网页内容

使用 parse() 方法解析网页：

1
let article = new Readability(document).parse();

返回的对象包含以下属性：

  • title：文章标题
  • content：提取后的 HTML 正文
  • textContent：纯文本形式的内容
  • length：正文长度（字符数）
  • excerpt：文章摘要
  • byline：作者信息
  • lang：内容语言
  • publishedTime：发布时间

示例代码：

1
2
3
4
5
var documentClone = document.cloneNode(true);
var article = new Readability(documentClone).parse();

console.log('标题:', article.title);
console.log('内容:', article.content);

3. 判断是否适合阅读模式

使用 isProbablyReaderable() 方法可以快速判断网页是否适合提取正文内容：

1
2
3
if (isProbablyReaderable(document)) {
    let article = new Readability(document).parse();
}

可选参数 options：

  • minContentLength：节点内容的最小长度（默认 140）
  • minScore：最低评分（默认 20）
  • visibilityChecker：判断节点可见性的函数

该方法不会消耗太多性能，非常适合在页面加载时快速做出判断。

Node.js 使用

在 Node.js 中，由于没有原生 DOM 实现，需要借助 jsdom：

1
2
3
4
5
6
7
8
9
10
11
12
const { Readability } = require('@mozilla/readability');
const { JSDOM } = require('jsdom');

const doc = new JSDOM("<body>这是一段示例文本</body>", {
    url: "https://example.com"
});

let reader = new Readability(doc.window.document);
let article = reader.parse();

console.log(article.title);
console.log(article.textContent);

需要注意：传递 URL 是为了正确转换网页中的相对路径（如图片和链接）为绝对路径。

安全性建议

在处理不受信任的 HTML 内容时，建议使用 DOMPurify 或其他 HTML 安全过滤库来防范 XSS 攻击。此外，结合 CSP（Content Security Policy） 进一步加强安全性。

Mozilla 在 Firefox 的阅读模式中使用了这些安全措施，因此我们也推荐在自己的项目中应用类似策略。

应用场景

  1. 阅读器模式
    集成到浏览器或阅读器应用中，自动生成简洁的阅读页面。

  2. 内容聚合
    在内容聚合平台中自动抓取网页文章，提升内容展示效果。

  3. 网页内容存档
    对网页进行内容提取并存储，适用于书签管理器或离线阅读器。

  4. SEO 分析
    自动提取网页正文用于搜索引擎优化和数据分析。

Readability.js 是一个强大的网页内容提取工具，可以极大地提升用户的阅读体验。它的轻量和易用性使其成为开发者的理想选择。想要体验这款工具，快到 GitHub 项目页面 下载试用吧！