HTML 處理利器 PostHTML 入門教程

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>
    });</pre>




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 來修改，易于編程。 

項目主頁：http://www.baiduhome.net/lib/view/home/1448175913745