vue中搜索查询文字高亮展示

最新推荐文章于 2023-10-12 13:19:25 发布

喵喵喵miao～

最新推荐文章于 2023-10-12 13:19:25 发布

阅读量2.3k

点赞数

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/xiongfine/article/details/129815356

版权

设计稿效果如下：

在这里插入图片描述

功能实现

html

<div class="data_item" >
	<span v-for="item in searchData" :key="item.id" v-html="item.title" @click="goLink(item.url)"></span>
</div>

js

data() {
  return {
    searchData: [],
    searchText: '',
  };
},

search(){
  this.main.request(
    this.url.sysmenulistall,
    {},
    res => {
      if (res.code == 0) {
        res.data && res.data.map(item=>{
          /**
             * 使用正则表达式进行全文匹配关键词
             * ig : 表示 全文查找 ,忽略大小写
             *  i : 忽略大小写
             *  g : 全文查找
             *
             * this.searchText 是搜索查询条件
             * 使用字符串的replace方法进行替换
             * obj.replace('被替换的值',替换的值) 
             * item.title是要需要匹配替换高亮的文案
            */
          if (this.searchText) {
            let replaceReg = new RegExp(this.searchText, "ig");
            let replaceString = `<span style="color: #F37C26">${this.searchText}</span>`;
            item.title = item.title.replace(replaceReg, replaceString);
          }
        })
        this.searchData = res.data;
      } else {
        this.$notify.error({
          title: "错误",
          message: res.message
        });
      }
    },
    "GET",
  );
},