最近在小程序的開發過程中遇到這樣的需求，一個搜索聯想關鍵詞高亮，另一個是將後臺傳過來的富文本解析成html展示在頁面中，這裏我們引入非常牛X的 wxParse ，之所以牛，是因為可以解決很多種問題，正因為如此所以它對於小程序來說也非常大，雖然只有100多kb。

地址

https://github.com/icindy/wxParse

使用

1. 單行文本解析
   #### wxml

   <import src="../../../utils/wxParse/wxParse.wxml"/>
   
   <template is="wxParse" data="{{wxParseData:article.nodes}}" />
    
   

   #### wxss

   @import '../../../utils/wxParse/wxParse.wxss';

   #### javascript

   let WxParse = require('../../../utils/wxParse/wxParse.js');
   
   Page({
     data: {
       wxParseData: ''
     },
     toHtml () {
       let article = '<div>123 <span>456</span></div>';
       WxParse.wxParse('article', 'html', article, this, 5);
     }
   })
    
   

2. 數組文本解析
   #### wxml

   <import src="../../../utils/wxParse/wxParse.wxml"/>
   
   <view class='list_for list_item' wx:key="{{index}}" wx:for="{{replyTemArray}}">
     <view class="list-item" data-index="{{index}}" bindtap='clickListItem'>
       <template class='list_item' is="wxParse" data="{{wxParseData:item}}" />
     </view>
   </view>
    
   

   #### wxss

   @import '../../../utils/wxParse/wxParse.wxss';

   #### javascript

   let WxParse = require('../../../utils/wxParse/wxParse.js');
   
   Page({
     data: {
       replyTemArray: []
     },
     // 搜索聯想，關鍵詞高亮
     keywordAssociation(keyword) {
       let _this = this;
   
       getSearchList(keyword).then(res => {
         _this.setData({
           searchList: res
         })
         let dataArr = res;
         for (let i = 0; i < dataArr.length; i++) {
           WxParse.wxParse('reply' + i, 'html', _this.highLight(dataArr[i].name, keyword), _this);
           if (i === dataArr.length - 1) {
             WxParse.wxParseTemArray("replyTemArray", 'reply', dataArr.length, _this)
           }
         }
       })
     }
   })

個人博客：午後南雜

【小程序】非常好用的富文本插件wxParse