纯前端实现模糊搜索并且关键词变色

一麻袋开心呀

已于 2024-05-16 10:31:08 修改

阅读量354

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端

于 2024-05-13 17:49:29 首次发布

本文链接：https://blog.csdn.net/weixin_48095278/article/details/138812664

fillist() {

        //务必先将后端给的数据深拷贝一份,否则会改变原数组

      let newArr = JSON.parse(JSON.stringify(this.searchArr))

        //找出带有搜索关键词的数组

      let filteredList = newArr.filter((item) => {

        if (this.searchVal) {

          return item.text.includes(this.searchVal)

        }

      })

        //通过正则匹配将关键词放入html模板中,在页面上通过富文本的方式渲染

      filteredList.forEach(item => {

        const regex = new RegExp(this.searchVal, "gi");

        item.text = item.text.replace(regex, '<span style="color: #1989FA">$&</span>');

      })

      return filteredList;

    }