微信小程序 搜索出来的关键字高亮显示

效果图展示

1. 未高亮显示效果图

   

2. 高亮显示后效果图
   

.wxml 文件

<text wx:for="{{item.blog_title}}" wx:key="{{index}}" class="{{item == new_sousuo_info ? 'searchHigh' : '' }}">{{item}}</text>

.wxss 文件

.searchHigh {
  color: #f00;
}

.js文件

const getInf = (str, key) => str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');

// res 为发请求后台返回的值
// blog_title 为高亮显示的内容，即本例中将博客标题里面的关键字高亮显示
// text 表示需要高亮显示的关键字，即搜索框里的内容
// blogs 表示所有博客内容信息
// concat() 表示拼接数组
var new_blogs = res["datas"]
// console.log(new_blogs)
for (var i = 0; i < new_blogs.length; i++) {
  var dic = new_blogs[i];
  var blog_title = dic["blog_title"];
  dic["blog_title"] = getInf(blog_title, text);
}
blogs = blogs.concat(new_blogs)

that.setData({
  blogs:blogs
});