搜素联想列表关键文字高亮

最新推荐文章于 2023-02-17 12:01:37 发布

放羊的阿三

最新推荐文章于 2023-02-17 12:01:37 发布

阅读量178

点赞数

分类专栏： VUE HTML CSS 前端面试文章标签：正则表达式 vue.js

本文链接：https://blog.csdn.net/weixin_59324977/article/details/120912232

版权

正则表达式关键字高亮 JavaScript 搜索联想字符串处理

关键词由CSDN通过智能技术生成

VUE 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

HTML CSS

4 篇文章 0 订阅

订阅专栏

前端面试

3 篇文章 0 订阅

订阅专栏

主要原理: <span style="color:red;">关键字</span> ,找到关键字加样式

<!-- 搜索联想建议列表 -->
    <div class="sugg-list" v-if="kw.length > 0">
      <div
        class="sugg-item"
        v-for="(Str, index) in sugList"
        :key="index"
        v-html="lightFn(Str, kw)"
        @click="clickFn(Str)"
      >
        {{ Str }}
      </div>
    </div>

在所遍历的联想列表,绑定v-html,并传参(整个字符串及要改变的关键字)

 // 关键字高亮
    lightFn (Str, kw) {
      // 使用正则找到str,'ig'忽略大小写
      const reg = new RegExp(kw, 'ig')
      // 返回一个字符串,str里有return回来的字符串进行替换
      return Str.replace(reg, (match) => {
        return `<span style='color:red'>${match}</span>`
      })
    },