Vue实现搜索关键词高亮显示-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue实现搜索关键词高亮显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近写移动端项目的时候，遇到搜索关键词高亮的需求，写篇文章纪录一下

先看效果：

vue实现搜索关键字高亮显示,vue.js,javascript,前端

以上为实现效果展示;

整体思路 : 对后台返回的数据进行操作,(我这里是模拟数据)，使用正则去匹配搜索关键词后,使用replace进行字符串的替换; 渲染数据部分使用v-html进行动态展示即可实现.

以下是代码：

html代码：

<template>
  <div class="box">
    <!-- 搜索框 -->
    <div class="mySearch">
      <van-search
        v-model="PopUpSarCh"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        class="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
   
    <!-- 搜索结果 -->
    <div class="SearchResults">
      <div class="SearchContent" v-for="(item, index) in list" :key="index">
        <h5 v-html="item.title"></h5>
        <div class="myContent" v-html="item.name"></div>
        <div class="dotted"></div>
      </div>
    </div>
   
  </div>
</template>

js代码：文章来源地址https://www.toymoban.com/news/detail-607167.html

export default {
  data() {
    return {
      list: [],
      PopUpSarCh: "",
 
    };
  },
  methods: {
    // 搜索框方法
    onSearch() {
      //每次搜索前清空
      this.list = [];
      var arr = [
        {
          title: "直装直提办理业务",
          name: "进口水果'船边直提'大铲湾码头水果通过效率第一，进口水果船边直提",
        },
        {
          title: "直装直提办理业务",
          name: "进口水果'船边直提'大铲湾码头水果通过效率第一，进口水果船边直提",
        },
        {
          title: "直装直提办理业务",
          name: "进口水果'船边直提'大铲湾码头水果通过效率第一，进口水果船边直提",
        },
        {
          title: "直装直提办理业务",
          name: "进口水果'船边直提'大铲湾码头水果通过效率第一，进口水果船边直提",
        },
      ];
      this.list = arr;
      this.changeColor(this.list);//调用搜索词方法
    },
    // 搜索关键词高亮方法
    changeColor(result) {
      //result为接口返回的数据
      result.map((item, index) => {
        if (this.PopUpSarCh) {
          /**
           * 使用正则表达式进行全文匹配关键词
           * ig : 表示 全文查找 ,忽略大小写
           *  i : 忽略大小写
           *  g : 全文查找
           *
           * 使用字符串的replace方法进行替换
           * stringObject.replace('被替换的值',替换的值)
              title和name是你要高亮的字段
           */
          let replaceReg = new RegExp(this.PopUpSarCh, "ig");
          let replaceString = `<span style="color: #ed4014">${this.PopUpSarCh}</span>`;
          result[index].title = item.title.replace(replaceReg, replaceString);
          result[index].name = item.name.replace(replaceReg, replaceString);
        }
      });
      this.records = result;
    },
  },
};

到了这里，关于Vue实现搜索关键词高亮显示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！