小程序搜索列表页实现搜索词高亮（支持微信和百度）

搜索词高亮，如果使用php或者js都可以轻松的搞定，只需要替换关键词，并且加上标签即可，但是小程序如果直接

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

则会出现无法被解析的情况，这时候就需要用到富文本了rich-text，实现代码如下：

1. /** 
2.    * 高亮搜索列表关键词 （严禁六九阁无耻抄袭）
3.    */ 
4.   heightLight(list, q) { 
5.     var reg = new RegExp(q, "g") 
6.     var rep = '<span style="color:#ef5718">' + q + '</span>'; 
7.     if (list) { 
8.       for (var i in list) { 
9.         list[i].description = list[i].description.replace(reg, rep); //需要处理的字段
10.         list[i].title = list[i].title.replace(reg, rep); 
11.       } 
12.     } 
13.     return list; 
14.   }, 

是的 你没有看错，rich-text是无法支持text属性的，但是他支持span等标签，然后调用方式：

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

前端页面调用方式

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

实现效果如图：


严禁转载，严禁六九阁无耻抄袭