实现过滤词汇高亮

js实现过滤词汇高亮


场景

前端实现查询后,将过滤后数据中的搜索词展现为高亮。
在这里插入图片描述


代码

思路:利用 正则表达式 对过滤词添加类名,然后使用 v-html 渲染在表格中。

    // 复制json数组
    copyObjectDataList(arr) {
    
    
        let list = [];
        _.each(arr,item => {
    
    
            list.push({
    
    ...item})
        })
        return list;
    },
    
    // 话术内容中的搜索词显示高亮
    getHighlightOfText(text, tipSearchTxt) {
    
    
      let result;
      if (tipSearchTxt === '') {
    
    
        return text;
      } else {
    
    
        let reg = new RegExp(tipSearchTxt, 'g');
        result = text.replace(reg, '<span class="bgc-yellow">' + tipSearchTxt + '</span>');
        return result;
      }
    },
    
    // 搜索话术内容
    onTipSearchClick(tipSearchTxt) {
    
    
      // tipCopyList: 复制原数组,存储全部数据
      let tipCopyList = this. copyObjectDataList(this.tipCopyList);
      if (tipSearchTxt === '') {
    
    
        this.tipList = tipCopyList;
        return;
      }
      // 筛选带有关键词的数据
      this.tipList = tipCopyList.filter(item => {
    
    
        if (item['tip_title'].indexOf(tipSearchTxt) !== -1 || item['tip_content'].indexOf(tipSearchTxt) !== -1 || item['remark'].indexOf(tipSearchTxt) !== -1) {
    
    
          if (item['tip_title'].indexOf(tipSearchTxt) !== -1) {
    
    
            item['tip_title'] = this.getHighlightOfText(item['tip_title'], tipSearchTxt);
          }
          if (item['tip_content'].indexOf(tipSearchTxt) !== -1) {
    
    
            item['tip_content'] = this.getHighlightOfText(item['tip_content'], tipSearchTxt);
          }
          if (item['remark'].indexOf(tipSearchTxt) !== -1) {
    
    
            item['remark'] = this.getHighlightOfText(item['remark'], tipSearchTxt);
          }
          return true
        }
      })
    }

猜你喜欢

转载自blog.csdn.net/qq_38374286/article/details/133093784
今日推荐