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

最新推荐文章于 2024-07-03 17:05:23 发布

小胖_@

最新推荐文章于 2024-07-03 17:05:23 发布

阅读量4.5k

点赞数

分类专栏：微信小程序文章标签：关键字高亮显示

本文链接：https://blog.csdn.net/weixin_45459224/article/details/102787643

版权

微信小程序专栏收录该内容

6 篇文章 1 订阅

订阅专栏

效果图展示

未高亮显示效果图
高亮显示后效果图

.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
});