什么是posthtml?
PostHTML 是一个可以使用插件的 HTML 解析器，类似于 Babel 处理 JavaScript 代码那样。它能够解析和转换 HTML 代码，在这些过程中用到了一系列的插件来完成各种任务。
在前端开发中，我们通常需要对 HTML 代码进行各种处理，例如添加、删除、修改标记等等。使用 PostHTML，可以通过编写自定义插件来满足这些需求，从而提高我们的效率。
安装和使用
安装命令：
npm install posthtml -D
使用方法：
-- -------------------- ---- ------- ----- -------- - -------------------- -- ------- ----- ------ - ---- -- - -- ----------- ------ ----- -- ------------------ -------------------- -------------- ------------ -- --------------------------
以上代码中，posthtml 函数接收一个数组作为参数，该数组里面是各个插件的集合。在调用 process 方法时，会将 HTML 代码作为参数传入，并且按照插件数组的顺序依次处理。
自定义插件编写完毕后，还需在插件数组中加入该插件才能实现相应的功能。
插件编写
插件其实就是一个函数，它接收一个树形结构的 HTML 代码作为参数，并返回一个经过处理后的新的树形结构。
const plugin = tree => {
// 对HTML代码进行处理
return newTree;
};其中，tree 是一个对象，它的结构就是被解析后的 HTML 代码。我们可以通过遍历这个对象来对 HTML 进行各种操作。
例如，我们想实现一个插件，将所有的 a 标签的 href 属性添加上 target="_blank" 这个属性。可以这样编写插件：
const addTargetBlankPlugin = tree => {
tree.match({ tag: 'a' }, node => {
if (!node.attrs) node.attrs = {};
node.attrs.target = '_blank';
return node;
});
return tree;
};在这个插件中，我们使用 match 方法来匹配所有的 a 标签，并遍历每个标签的 node 对象，在其中添加一个 target 属性，并设置其值为 _blank。
示例代码
下面是一个完整的例子，该例子实现了以下两个功能：
- 将所有的
a标签的href属性添加上target="_blank"这个属性。 - 将所有的
img标签的src属性的文件名改成large-xxx.jpg的格式。
-- -------------------- ---- -------
----- -------- - --------------------
----- -- - --------------
-- --------------------
----- -------------------- - ---- -- -
------------ ---- --- -- ---- -- -
-- ------------- ---------- - ---
----------------- - ---------
------ -----
---
------ -----
--
-- ----------------
----- ------------------ - ---- -- -
------------ ---- ----- -- ---- -- -
-- ------------ -- ---------------- ------ -----
--- - --- - - -----------
--- --------- - ---------------------
--- -------- - ----------------------- - ---
--- ----------- - --------------------
-------------- - ---------------- --------- - -- - ------------
------ -----
---
------ -----
--
-- --------
----- ---- - ------------------------------- ---------
-- ----------------
------------------------------- --------------------
--------------
------------ -- --------------------------总结
PostHTML 是一个功能强大的 HTML 解析器，可以通过编写
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/44208