HTML 处理利器 PostHTML 入门教程_html/css_WEB-ITnose-html教程-PHP中文网

HTML 处理利器 PostHTML 入门教程_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 09:03:16

原创

1544人浏览过

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 插件就是一个个流水线车间：

天谱乐

唱鸭旗下AI音乐创作平台，为您提供个性化音乐创作体验！

514

查看详情

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 来修改，易于编程。