在前端开发中,我们经常需要获取页面中的元数据(metadata),例如网站的标题、描述、关键词等等。在过去,我们可能需要手动遍历页面 DOM 来获取这些信息。但是现在,有一个名叫 metadata-js 的 npm 包能够方便地实现元数据的抓取和解析。
什么是 metadata-js?
metadata-js 是一个 Node.js 和浏览器都能够使用的 JavaScript 库,它可以解析 HTML 中的 meta、link 和 script 标签,获取其中的元数据信息。metadata-js 还支持自定义解析器,可以解析更多类型的标签。
安装 metadata-js
我们可以在命令行中使用 npm 包管理工具来安装 metadata-js:
npm install metadata-parser
使用 metadata-js
在代码中,我们需要先引入 metadata-js 模块:
const metadata = require('metadata-parser');
最简单的用法是传入 HTML 字符串进行解析:
-- -------------------- ---- ------- ----- ---- - ---------- ----- ------ ------ ------------------ ----- ------------------ ------------------------ ----- --------------- ------------- ------------- ------- ------ ------------ --------------- ------- --------- ----- ------ - --------------------- --------------------
上述代码会输出以下结果:
{ title: '测试页', description: '这是一个测试页的描述信息。', keywords: '测试页, metadata-js' }
metadata-js 可以解析的标签包括 meta、link 和 script 标签,它们的属性会被解析为对象的属性。例如上面的代码解析出的 result
对象包含了 title、description 和 keywords 属性。
metadata-js 还支持独立标签解析器,例如我们可以解析 Open Graph Protocol 标签:
const url = 'https://www.baidu.com'; const parser = new metadata.OpenGraphParser(); parser.parseUrl(url).then((result) => { console.log(result); }).catch((error) => { console.error(error); });
上述代码会输出以下结果:
-- -------------------- ---- ------- - ------ ------------ ----- ---------- ---- ------------------------- ------ -------------------------------------------------------- ---------- ----- ------------ ------------------------------------------------------------------------------------------------ ---------------- ------------ -
这样我们就可以轻松地获取指定页面的 Open Graph Protocol 元数据了。
总结
在本文中,我们介绍了 metadata-js 的基本用法和高级用法,你可以在自己的项目中使用这个工具来方便地获取 HTML 页面中的元数据。metadata-js 还有很多其它功能,如提供了一些专门针对社交媒体网站的解析器,具体的使用方法可以查看其官方文档(https://github.com/mozilla/page-metadata-parser)。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066f411d8e776d08040d5d