微信小程序搜索列表关键字高亮文字高亮

萝呗 .

已于 2024-07-03 17:07:34 修改

阅读量345

点赞数 5

文章标签：微信小程序小程序 javascript

于 2024-07-03 17:05:23 首次发布

本文链接：https://blog.csdn.net/qq_55402603/article/details/140157118

版权

小程序搜索文字高亮可以用提供的基础富文本组件rich-text来渲染处理过的高亮数据，适用简单展示搜索列表

在这里插入图片描述

思路是例如正则匹配替换关键词

  highlightText(text,key) {
    const regex = new RegExp(key, 'gi');
    return text.replace(regex, match => `<span style='color:red'>${match}</span>`);
  },

利用工具函数遍历处理需要高亮的数据

      let tempArr = []
      if (dataList && dataList.length) {
        tempArr = dataList.map(item => {
          return {
            name: this.highlightText(需要处理的数据,高亮关键字)
          }
        })
      }
       this.setData({
        showList: tempArr
      })