Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >readability

readability

作者头像
阿超
发布于 2025-02-02 13:28:55
发布于 2025-02-02 13:28:55
2500
举报
文章被收录于专栏:快乐阿超快乐阿超

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:发布时间

示例代码:

12345

var documentClone = document.cloneNode(true);var article = new Readability(documentClone).parse();console.log('标题:', article.title);console.log('内容:', article.content);


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

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

123

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

可选参数 options

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

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


Node.js 使用

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

123456789101112

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 项目页面 下载试用吧!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-01-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
​如何处理Express和Node.js应用程序中的错误
使用Express创建API时,我们定义了路由及其处理程序。在理想情况下,API的使用者只会向我们定义的路由发出请求,并且路由将正常运行。但是,我们不会生活在理想的世界中:)。Express知道这一点,并使我们API中的错误处理变得轻而易举。
前端知否
2020/03/23
6.2K0
08_Express框架
使用Node.js进行服务器开发,开发效率比较低,例如在实现路由功能和静态源访问功能时,代码写起来很烦琐 为了提高Node.js服务器的开发效率,人们开发了Express框架,它可以帮助开发人员快速创建网站应用程序。
张哥编程
2024/12/13
3170
08_Express框架
前端Express框架必学之:Node.js项目搭建与接口开发实战
Express是一个基于Node.js平台的轻量级Web应用框架,它提供了简洁的API和丰富的功能,使得开发者能够快速地构建Web服务器和API。本文将带领大家从零开始,使用Express框架搭建一个简单的Web应用。
肥晨
2024/04/24
2.6K0
前端Express框架必学之:Node.js项目搭建与接口开发实战
🥬🐕 node的第一个接口:注册
mongodb安装如果是Mac的请看 这篇文章 操作mongodb的插件有很多,这里我们使用mongoose 安装插件
用户4793865
2023/01/12
1.3K0
2024 版:Node.js+Express+Koa2+Nest.js 开发服务端(高の青)
在现代的 web 开发中,Node.js 是一种非常流行的服务器端 JavaScript 环境。我们来编写一个大致的框架和一些关键代码片段,以帮助你了解如何使用 Node.js、Express、Koa2 和 Nest.js 开发服务端应用。
百课优用户
2024/07/29
4720
Nodejs之express框架的基本使用
此文是个人学习归纳的记录,腾讯云首发,未经允许,严禁转载,如有不对, 还望斧正, 感谢!
言志志
2024/04/30
3210
Node.js学习笔记——Express、路由、中间件、接口跨域解决方案详解(附实例)
Express 是基于 Node.js 平台,快速、开放、极简的 Web 开发框架 通俗的理解:Express 的作用和 Node.js 内置的 http 模块类似,是专门用来创建 Web 服务器的。 本质就是一个 npm 上的第三方包,提供了快速创建 Web 服务器的便捷方法 中文官网 http://www.expressjs.com.cn/
timerring
2022/07/20
4.1K0
Node.js学习笔记——Express、路由、中间件、接口跨域解决方案详解(附实例)
【Nodejs】Express实现接口
node-http模块 ==⇒ express框架 ==⇒ koa =⇒ egg.js
且陶陶
2023/05/09
1.7K0
【Nodejs】Express实现接口
关于Express的一些路由与响应方法
炑焽
2025/01/07
2700
Express 使用详情
Express 是一款基于 Node.js 的 Web 开发框架,它提供了简洁的 API,使得 Web 应用开发变得更加高效和方便。本文将详细介绍 Express 的使用方法,包括安装、基本概念、路由、中间件、模板引擎等,并给出相应的代码示例。
世间万物皆对象
2024/03/20
3520
Express使用手记:核心入门
Express是基于nodejs的web开发框架。优点是易上手、高性能、扩展性强。
IMWeb前端团队
2019/12/05
1.1K0
Node.js 路由的原理、使用方式以及一些常见的应用场景
在 Web 开发中,路由(Routing)是指根据不同的请求路径和请求方法,将请求分发到相应的处理函数或中间件。Node.js 作为一种后端开发环境,也提供了强大的路由功能。本文将详细介绍 Node.js 路由的原理、使用方式以及一些常见的应用场景。
网络技术联盟站
2023/07/07
9230
Express框架
Express是一个基于Node平台的web应用开发框架,它提供了一系列的强大特性,帮助你创建各种Web应用。我们可以使用 npm install express 命令进行下载。
星辰_大海
2020/11/10
2K0
Express框架
Express新手入坑笔记之动态渲染HTML
这里的public不会显示在url中, 为了方便判别静态文件的url请求, 我们在public内新建一个static文件夹, 这样所有请求静态文件的url,都会以static开头(这里借鉴了django处理静态文件的方法)
zhaoolee
2018/12/26
3.9K0
Express中间件,看这篇文章就够了(#^.^#)
okaychen
2018/01/05
2.2K0
Express中间件,看这篇文章就够了(#^.^#)
NodeJS背后的人:Express
前置知识:需要掌握了解: JavaScript基础语法 、Node.JS环境API 、前端工程\模块化 ·····
Java_慈祥
2024/08/06
5610
NodeJS背后的人:Express
Express(一) ——简单入门
背景:参加的青训营项目,使用 Express 来实现后端,个人被分配到后端去。于是,简单速通了下 Express。项目结束,回头写下笔记,沉淀一下。
赤蓝紫
2023/01/02
3.7K0
Express(一) ——简单入门
自定义mock数据,实现restful风格api
介绍两种方式做mock的server: - Express for mock - json-server
江米小枣
2020/06/15
1.6K0
如何在Node.js和Express中上传文件
大量的移动应用程序和网站允许用户上传个人资料图片和其他文件。 因此,在使用Node.js和Express构建REST API时,通常需要处理文件上传。
ccf19881030
2020/10/26
7K0
如何在Node.js和Express中上传文件
express的中间件app.use()的使用
安装好了express框架后,会在项目目录中看到node_modules依赖文件包,在项目的目录下新建一个routes目录,并在routes目录下新建index.js文件用于将不同方式请求的路由数据导出。
ruochen
2021/11/24
1.5K0
推荐阅读
相关推荐
​如何处理Express和Node.js应用程序中的错误
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档