在 Web 开发过程中，我们不可避免地需要处理 HTML 代码。虽然 HTML 看起来很简单，但是在实际开发中，由于 HTML 标记和属性的丰富性，相信每个前端工程师都有处理 HTML 的经验。
为了简化开发过程中 HTML 的处理，我们可以使用一些帮助我们处理 HTML 的工具。在这篇文章中，我们将介绍一个 npm 包叫做 html-primer，并且详细地讲解如何使用它。
什么是 html-primer
html-primer 是一个基于 Node.js 的 npm 包，它提供了各种实用的方法，帮助我们处理 HTML 代码。html-primer 可以帮助我们完成以下工作：
- 将 HTML 字符串转换为 js 对象。
- 将 js 对象转换为 HTML 字符串。
- 将 js 对象转换为符合 JSON-LD 规范的 js 对象。
安装 html-primer
安装 html-primer 非常简单，只需要在命令行中输入以下命令：
npm install html-primer
使用 html-primer
在我们开始使用 html-primer 之前，让我们先来看一下一个 HTML 片段：
-- -------------------- ---- -------
---- ----------------
--------
-----------
---------
---------
-----------
----------
--------
-----------
---------
------接下来我们将详细介绍如何使用 html-primer 来处理这个 HTML 片段。
将 HTML 字符串转换为 js 对象
首先我们可以使用 html-primer 中的 parse 方法将 HTML 字符串转换为 js 对象：
-- -------------------- ---- -------
----- ---------- - -----------------------
----- ---------- - -
---- ----------------
--------
-----------
---------
---------
-----------
----------
--------
-----------
---------
------
--
----- --- - -----------------------------
-----------------输出结果如下：
-- -------------------- ---- -------
-
---- ------
------ - ------ --------- --
--------- -
-
---- ---------
--------- -
-
---- -----
--------- - ---- -
-
-
--
-
---- ----------
--------- -
-
---- ----
--------- - ------ -
-
-
--
-
---- ---------
--------- -
-
---- ----
--------- - ------ -
-
-
-
-
-我们可以看到，html-primer 返回了一个 js 对象。该 js 对象的结构与 HTML 标记的结构非常相似，其中包含了标记的标签名、属性、以及子元素。
将 js 对象转换为 HTML 字符串
接下来我们可以使用 html-primer 中的 generate 方法将 js 对象转换为 HTML 字符串：
const htmlString = htmlPrimer.generate(obj); console.log(htmlString);
输出结果与原始的 HTML 片段相同：
-- -------------------- ---- -------
---- ----------------
--------
-----------
---------
---------
-----------
----------
--------
-----------
---------
------将 js 对象转换为符合 JSON-LD 规范的 js 对象
最后，我们可以使用 html-primer 中的 toJSONLD 方法将 js 对象转换为符合 JSON-LD 规范的 js 对象。JSON-LD 是一种用于描述实体的数据格式，这种格式的数据可以被搜索引擎解析，并且可以为我们的网站提供更好的 SEO 支持。
const jsonLD = htmlPrimer.toJSONLD(obj); console.log(jsonLD);
输出结果如下：
-- -------------------- ---- -------
-
----------- --------------------
-------- ----------
----------- -----
------------------- -
-------- ----------
------ --------------------
--
-------------- -------
------------ -
-------- ---------------
------- -------- ------------ ---- -------
------- -
-------- --------------
------ -------- ---- --- ------
-
-
-我们可以看到，toJSONLD 方法返回了一个符合 JSON-LD 规范的 js 对象，该对象可以用于网站的 SEO 支持。
结语
通过本文的介绍，我们了解了如何使用 npm 包 html-primer 来处理 HTML 代码。html-primer 提供了诸多实用的方法，可以帮助我们简化 HTML 处理的流程。希望本文能为初学者提供一些帮助，同时也对有一定经验的读者有所指导意义。
完整示例代码如下所示：
-- -------------------- ---- -------
----- ---------- - -----------------------
----- ---------- - -
---- ----------------
--------
-----------
---------
---------
-----------
----------
--------
-----------
---------
------
--
----- --- - -----------------------------
-----------------
----- ---------- - -------------------------
------------------------
----- ------ - -------------------------
--------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f2781e8991b448dcbc9