简介
metagetplus 是一个 NPM 包，它可以用来解析 HTML 页面中的元标记数据，同时还可以对页面的标题、描述和图片等进行处理。它可以用于前端开发中的 SEO 优化、社交分享以及其他一些功能。
安装
要使用 metagetplus，您首先需要在您的项目中安装它。您可以使用 npm 进行安装，命令如下所示：
npm install metagetplus --save
当安装完成后，您就可以在您的 JavaScript 代码中使用 metagetplus 了。
使用
metagetplus 有两种类型的方法：简单解析和完整解析。简单解析只提供元标记数据的基本信息，而完整解析还提供了页面的标题、描述和图片等详细信息。
简单解析
要进行简单解析，您只需要调用 parseMetaTags 方法，并将需要解析的 HTML 代码作为参数传递给它。代码示例如下：
-- -------------------- ---- -------
----- ----------- - -----------------------
----- ---- - -
------
------
----------------------
----- ------------------ -------------------
----- --------------- --------------------
-------
-------
--
----- ---- - --------------------------------
------------------输出结果如下：
{
description: '这里是页面描述',
keywords: '这里是页面关键词'
}如上所示，parseMetaTags 方法返回一个包含了页面的描述和关键词信息的对象。
完整解析
要进行完整解析，您需要先调用 fetch 方法获取页面的 HTML 代码，然后再将 HTML 代码作为参数传递给 parse 方法。代码示例如下：
-- -------------------- ---- ------- ----- ----------- - ----------------------- ------ -- -- - ----- --- - ------------------------ ----- ---- - ----- ----------------------- ----- ---- - ------------------------ ------------------ -----
输出结果如下：
{
title: '百度一下，你就知道',
description: '全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。',
keywords: '',
image: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
url: 'https://www.baidu.com'
}如上所示，parse 方法返回一个包含了页面的标题、描述、关键词、图片和 URL 等详细信息的对象。
处理图片
metagetplus 还提供了一个方法可以用于处理页面中的图片，它可以帮助您获取 HTML 代码中的所有图片，或者获取指定 class 或 id 的图片。代码示例如下：
-- -------------------- ---- ------- ----- ----------- - ----------------------- ------ -- -- - ----- --- - ------------------------ ----- ---- - ----- ----------------------- ----- ------ - ------------------------------ -------------------- -----
输出结果如下：
-- -------------------- ---- ------- - -------------------------------------------------------- ----------------------------------------- ---------------------------------------- ---------------------------------- ---------------------------------- ---------------------------------- ---------------------------------- ----------------------------------- ----------------------------------- ----------------------------------- ----------------------------------- ----------------------------------- ---------------------------------- -
使用 selectImages 方法可以指定要获取的图片的 class 或 id。代码示例如下：
-- -------------------- ---- ------- ----- ----------- - ----------------------- ------ -- -- - ----- --- - ------------------------ ----- ---- - ----- ----------------------- ----- ------ - ------------------------------ ------------ --- ------ -------------------- -----
输出结果如下：
[ 'https://www.baidu.com/img/pc_soutu.png', 'https://www.baidu.com/img/pc_temp_378d8cf.gif', 'https://www.baidu.com/img/flexible/logo/pc/result.png', 'https://www.baidu.com/img/bd_logo1.png', 'https://www.baidu.com/img/bd_icon.png' ]
如上所示，selectImages 方法返回一个数组，其中包含了指定的 class 或 id 中的所有图片。
结论
metagetplus 是一个功能强大的 NPM 包，它可以帮助前端开发人员更方便地处理页面中的元标记数据和图片。在日常工作中，您可以使用它来进行 SEO 优化、社交分享等工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f411d8e776d08040d8f