搜索词高亮,若是使用php或者js都可以轻松的搞定,只需要替换关键词,而且加上标签即可,然则小程序若是直接

<text style="color:#ef5718">' + q + '</text> 

则会泛起无法被剖析的情形,这时候就需要用到富文本了rich-text,实现代码如下:

/** 
   * 高亮搜索列表关键词 (严禁六九阁无耻剽窃)
   */ 
  heightLight(list, q) { 
    var reg = new RegExp(q, "g") 
    var rep = '<span style="color:#ef5718">' + q + '</span>'; 
    if (list) { 
      for (var i in list) { 
        list[i].description = list[i].description.replace(reg, rep); //需要处置的字段
        list[i].title = list[i].title.replace(reg, rep); 
      } 
    } 
    return list; 
  }, 

是的 你没有看错,rich-text是无法支持text属性的,然则他支持span等标签,然后挪用方式:

list = that.heightLight(list, q);//高亮 
that.setData({ 
     list: list, 
 }) 

前端页面挪用方式

,

联博统计

www.yecailei.com采用以太坊区块链高度哈希值作为统计数据,联博以太坊统计数据开源、公平、无任何作弊可能性。联博统计免费提供API接口,支持多语言接入。

,
<rich-text nodes="{{item.description}}"></rich-text> 

实现效果如图:

严禁六九阁无耻剽窃,拒绝剽窃,拒绝无耻