在前端开发中，我们常常需要获取网页的预览信息，比如网页的标题、描述、缩略图等。而获取这些信息的方式有多种，其中一种比较方便的方式是使用 npm 包 node-link-preview。本文将详细介绍如何使用 node-link-preview 获取网页的预览信息，并给出示例代码。
什么是 node-link-preview
node-link-preview 是一个 Node.js 模块，它能够使用网页链接获取其预览信息。具体来说，它可以获取网页的标题、描述、缩略图等信息。
安装和使用 node-link-preview
要使用 node-link-preview，首先需要安装它。可以使用 npm 进行安装，命令如下：
npm install node-link-preview
安装完成后，就可以在项目中使用它了。下面是一个完整的示例代码，可以获取指定网页的预览信息：
-- -------------------- ---- -------
----- ----------- - -----------------------------
------------------------------------------------
---------- -- -
------------------
--
------------ -- -
---------------------
---在上面的示例代码中，首先引入了 node-link-preview 模块。然后调用了该模块的 getPreview 方法，传入了一个要获取预览信息的网页链接。getPreview 方法返回一个 Promise 对象，可以使用 then 方法和 catch 方法分别处理成功和失败的情况。在成功的情况下，将获取到的预览信息打印到控制台。
运行上面的示例代码，就可以看到获取到的预览信息。例如，如果获取百度首页的预览信息，输出结果可能是这样的：
{
url: 'https://www.baidu.com/', // 网页链接
title: '百度一下，你就知道', // 网页标题
description: '全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。', // 网页描述
images: [
'https://www.baidu.com/img/flexible/logo/pc/result.png'
] // 缩略图链接
}深入理解 node-link-preview 的工作原理
要深入理解 node-link-preview 的工作原理，需要先了解网页预览信息的获取方式。具体来说，获取网页预览信息一般包括以下几个步骤：
- 根据网页链接发送 HTTP 请求，得到网页的 HTML 内容。
- 从 HTML 内容中解析出网页的标题、描述、缩略图等信息。
在上面的过程中，第一步是发送 HTTP 请求，而 node-link-preview 使用了 Node.js 中的 http 模块进行 HTTP 请求的发送。具体而言，它使用了 http.get 方法发送了一个 GET 请求，如下所示：
const request = http.get(link, response => {
// ...
});在得到了网页的 HTML 内容后，node-link-preview 就使用了 cheerio 模块进行 HTML 内容的解析。具体而言，它使用了 cheerio.load 方法将 HTML 内容加载到 cheerio 对象中，然后就可以从 cheerio 对象中提取出需要的预览信息，如下所示：
const $ = cheerio.load(html);
const title = $('title').text();
const description = $('meta[name=description]').attr('content');
const images = $('img').map((i, el) => $(el).attr('src')).get();通过上面的描述，我们就可以了解 node-link-preview 的工作原理了。当然，实际情况可能比这个复杂，不同网站的 HTML 结构不同，预览信息的提取方式也有所不同。但是，对于大多数网站而言，以上的流程是基本相似的。
用 node-link-preview 实现网页预览功能
在前端开发中，我们经常需要实现网页预览功能。如下图所示，当用户输入一个网页链接时，会自动显示该网页的预览信息，包括网页标题、描述和缩略图等。
这个功能的实现比较复杂，但是使用 node-link-preview 就比较容易实现。具体而言，我们可以使用以下步骤实现网页预览功能：
- 获取用户输入的网页链接。
- 使用 node-link-preview 获取网页的预览信息。
- 将预览信息显示在页面上。
要实现以上的功能，需要编写一些 JavaScript 代码。下面是一个完整的 HTML+JavaScript 的示例代码，可以实现网页预览功能：
-- -------------------- ---- -------
--------- -----
------
------
-------------------
----- ----------------
----- --------------- ---------------------------- -------------------
-------
------
-------------
---------------
------ ----------- ----------------- -------------------------------
---- -------------------
--------
-------- --------- -
----- ---- - --------------------------------------
----- ---------- - -----------------------------------
-------------------- - ------------------
---------------------------- -- -
----- - ------ ------------ ------ - - -----
-------------------- - -
-----------------
---------------------
------------------ -- ----- ---------------------------
--
-------------- -- -
---------------------
-------------------- - ------------------------
---
-
----- -------- ------------------ -
----- -------- - ----- ---------------------------------------------------
-- -------------- -
----- --- ------------- -- ----- ----------
-
------ ----- ----------------
-
---------
-------
-------在上面的代码中，首先定义了一个基本的 HTML 结构，包括输入框、按钮和一个用于显示预览信息的 div 元素。然后定义了一个名为 preview 的 JavaScript 函数，它会从输入框中获取用户输入的网页链接，利用 fetchPreview 函数获取网页的预览信息，最终将预览信息显示在页面上。
fetchPreview 函数使用了 fetch API 获取预览信息。由于 node-link-preview 只能在 Node.js 中使用，无法直接在浏览器中使用，因此需要通过跨域请求的方式将网页链接传递给 Node.js 程序，然后从 Node.js 程序中返回预览信息。具体而言，我们需要在 Node.js 程序中创建一个 HTTP 服务器，然后在客户端通过 fetch API 发送 HTTP 请求，如下所示：
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - ---------------
----- ----------- - -----------------------------
----- ------ - ----------------------- ---- -- -
-------------------------------------------- -----
----------------------------- --------------------
----- ----------- - ------------------ ------------
-- ------------------- -
-------------- - ----
------------------------ ------ -------- ---- ---------- ----
-------
-
-------------------------------------------------- -- -
-------------- - ----
------------------------------
-------------- -- -
---------------------
-------------- - ----
------------------------ ------ ------- -- ----- -------- ----
---
---
------------------- -- -- -
-------------------- ------ -- ------- -- ---- -------
---在上面的代码中，首先创建了一个 HTTP 服务器，然后使用了 node-link-preview 获取指定网页的预览信息，并将其返回给客户端。要让客户端能够访问这个 HTTP 服务器，我们需要将上面的代码保存为一个名为 server.js 的文件，并使用以下命令运行它：
node server.js
这样就可以在本地创建一个 HTTP 服务器，监听 8080 端口，等待客户端的请求了。
在本地启动 HTTP 服务器后，我们在浏览器中打开上面的 HTML 文件，输入一个网页链接，并点击 “预览” 按钮，就可以实现网页预览功能了。
总结
本文介绍了 npm 包 node-link-preview 的使用方法，并给出了使用它实现网页预览功能的示例代码。使用 node-link-preview 能够方便地获取网页预览信息，而编写一些 JavaScript 代码就可以实现即时的网页预览功能。这对于提高用户体验和提高网站的质量都具有重要的意义。同时，本文也深入讲解了 node-link-preview 的工作原理，希望读者可以从中受益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005723181e8991b448e8563