搜索筛选文字高亮

最新推荐文章于 2023-12-07 00:06:19 发布

爱吃棉花糖#

最新推荐文章于 2023-12-07 00:06:19 发布

阅读量103

点赞数

分类专栏：【JS】【开发笔记】文章标签：前端 vue.js

本文链接：https://blog.csdn.net/ch_13157582015/article/details/125486091

版权

【开发笔记】同时被 2 个专栏收录

55 篇文章 1 订阅

订阅专栏

【JS】

23 篇文章 1 订阅

订阅专栏

1.template

<el-input
  size="small"
  v-model="keyword"
  placeholder="请输入内容"></el-input>
  <p v-html="brightenKeyword(item.title, keyword)"></p>

2.js

//筛选高亮
    brightenKeyword(val, keyword) {
      // 方法2：用正则表达式
      const Reg = new RegExp(keyword, "i");
      if (val) {
        const res = val.replace(
          Reg,
          `<span style="color: #3aa1ff;">${keyword}</span>`
        );
        // console.log(res);
        return res;
      }
    },