HTML 处理利器 PostHTML 入门教程_html/css_WEB-ITnose
程序员文章站
2022-04-10 11:18:50
...
PostHTML是一个转换HTML/ XML的工具。 PostHTML本身是非常小的。它只包括一个HTML解析器,一个HTML节点树API和一个节点树stringifier。
PostHTML 将 HTML 文档按照 DOM 模型分解为一个个 node(JavaScript 对象),加上这些 node 的父子关系,形成 PostHTMLTree; PostHTML 插件获得用 JavaScript 表示的 PostHTMLTree 对象,修改、更新或者移除树上的节点,实现特定功能; 最后 PostHTML 再把新的 PostHTMLTree 对象转换成 HTML 文档。
var posthtml = require('posthtml');var html = '';posthtml() .use(require('posthtml-custom-elements')()) .process(html/*, options */) .then(function(result) { console.log(result.html); // Super Title Awesome Text });Super TitleAwesome Text
PostHTML 的特点
客官可能会问,这种替换的功能,我用正则表达式也能做呀,那 PostHTML 的优势是什么呀?
PostHTML 之于 HTML,就像 PostCSS 之于 CSS。
Uglify 之于 JavaScript,除了插件体系并不成熟以外。
PostHTML 好比一个汽车翻新工厂,而 PostHTML 插件就是一个个流水线车间:
可见,PostHTML 并不提供具体的功能,仅仅实现了 HTML 和 PostHTMLTree 互相转化,且提供通用的 API 和 插件模型,让插件操作 PostHTMLTree。这与 PostCSS 如出一辙。具备如下的有点:
- JavaScript only:使用 JavaScript 实现,是每一个前端的梦想;
- 模块化:你可以按照需求,将插件(功能)组合起来使用;
- 轻量:按需添加,避免引入大量并不使用的特性;
- 快速扩展:在需求无法满足的时候,PostHTML 提供了便利的方式来扩展功能;
-
鲁棒性:按照 DOM 语法,将 HTML 转换为 AST,比起正则匹配来说有更高的准确性、更细的粒度以及更强的控制力;
可编程:将 HTML 转换为用 JS 对象表示的 AST,可以很方面的使用 JS 来修改,易于编程。
项目主页:http://www.open-open.com/lib/view/home/1448175913745
上一篇: 详细解读Thinkjs3的简单使用
下一篇: 微信小程序授权获取用户详细信息实例
推荐阅读
-
java selenium (十四) 处理Iframe 中的元素_html/css_WEB-ITnose
-
Css3 filter图片处理_html/css_WEB-ITnose
-
【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计_html/css_WEB-ITnose
-
CSS一个效果处理不来 请大家帮下忙_html/css_WEB-ITnose
-
如何处理点击后的这个虚线框_html/css_WEB-ITnose
-
通过yeoman、gulp、angular编写前段时的html模板处理,打包后找不到html的问题解决_html/css_WEB-ITnose
-
css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题_html/css_WEB-ITnose
-
CSS一个效果处理不来 请大家帮下忙_html/css_WEB-ITnose
-
postdata中碰到&字符怎么处理_html/css_WEB-ITnose
-
从零开始一步一步写一个简单的 Virtual DOM 实现 2 :Props&Event 处理_html/css_WEB-ITnose