HTML 处理利器 PostHTML 入门教程
jopen
9年前
PostHTML是一个转换HTML/ XML的工具。 PostHTML本身是非常小的。它只包括一个HTML解析器，一个HTML节点树API和一个节点树stringifier。
var posthtml = require('posthtml'); var html = '<myComponent><myTitle>Super Title</myTitle><myText>Awesome Text</myText></myComponent>'; posthtml() .use(require('posthtml-custom-elements')()) .process(html/*, options */) .then(function(result) { console.log(result.html); // <div class="myComponent"><div class="myTitle">Super Title</div><div class="myText">Awesome Text</div></div> });
PostHTML 的特点
客官可能会问，这种替换的功能，我用正则表达式也能做呀，那 PostHTML 的优势是什么呀？
PostHTML 之于 HTML，就像 PostCSS 之于 CSS。
Uglify 之于 JavaScript，除了插件体系并不成熟以外。
PostHTML 好比一个汽车翻新工厂，而 PostHTML 插件就是一个个流水线车间：
- PostHTML 将 HTML 文档按照 DOM 模型分解为一个个 node（JavaScript 对象），加上这些 node 的父子关系，形成 PostHTMLTree；
- PostHTML 插件获得用 JavaScript 表示的 PostHTMLTree 对象，修改、更新或者移除树上的节点，实现特定功能；
- 最后 PostHTML 再把新的 PostHTMLTree 对象转换成 HTML 文档。
可见，PostHTML 并不提供具体的功能，仅仅实现了 HTML 和 PostHTMLTree 互相转化，且提供通用的 API 和 插件模型，让插件操作 PostHTMLTree。这与 PostCSS 如出一辙。具备如下的有点：
- JavaScript only：使用 JavaScript 实现，是每一个前端的梦想；
- 模块化：你可以按照需求，将插件（功能）组合起来使用；
- 轻量：按需添加，避免引入大量并不使用的特性；
- 快速扩展：在需求无法满足的时候，PostHTML 提供了便利的方式来扩展功能；
- 鲁棒性：按照 DOM 语法，将 HTML 转换为 AST，比起正则匹配来说有更高的准确性、更细的粒度以及更强的控制力；
可编程：将 HTML 转换为用 JS 对象表示的 AST，可以很方面的使用 JS 来修改，易于编程。