1. 背景

在我们的日常开发中，在搜索框去搜索一个内容，搜索的关键字高亮是一个比较常用的功能。

最近的项目需要实现搜索关键词进行高亮展示的效果,写篇文章记录一下实现过程。

下面来看看实现效果。

2. 效果演示3. 整体思路

通过接口获取到后端返回的列表数据，对返回的数据进行操作，匹配到搜索关键词后,使用replace进行字符串的替换， html部分使用v-html进行动态展示即可实现。

4. 实现方法4.1 使用indexOf进行匹配

如果val包含关键词keyword，就将keyword替换为高亮样色

封装方法

brightenKeyword(val, keyword) {    val = val + '';        if (val.indexOf(keyword) !== -1 && keyword !== '') {            return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>')        } else {            return val        }}

如果val包含关键词keyword，就将keyword替换为高亮样色

封装方法

brightenKeyword(val, keyword) {        const Reg = new RegExp(keyword, 'i');                if (val) {                    return val.replace(Reg, `<span style="color: #409EFF;">${keyword}</span>`);                }            }

 <el-table-column label="维护内容">        <template slot-scope="scope">            <span v-html="brightenKeyword(scope.row.strContent, filters.strContent)"  />        </template>    </el-table-column>

<template>  <section>    <!--工具条-->    <el-form ref="form" :model="form" @submit.prevent="onSubmit" style="margin:10px;">      <el-form :inline="true" :model="filters" class="demo-form-inline">        <el-row>          <el-col :xs="12" :sm="12" :md="12" :lg="12" style="margin-left: 12px;">            <el-form-item label="维护项">              <el-input v-model="filters.strTitle" placeholder="维护项" style="width: 160px;"></el-input>            </el-form-item>          </el-col>          <el-col :xs="10" :sm="10" :md="10" :lg="10">            <el-form-item label="维护内容">              <el-input v-model="filters.strContent" placeholder="维护内容" style="width: 180px;"></el-input>            </el-form-item>          </el-col>          <el-col :xs="24" :sm="24" :md="24" :lg="12">            <el-form-item label-width="80px" label="创建时间" class="postInfo-container-item">              <el-date-picker                v-model="filters.createTime"                type="datetimerange"                :picker-options="pickerOptions2"                placeholder="选择时间范围"                align="right"              ></el-date-picker>            </el-form-item>          </el-col>          <el-col :xs="24" :sm="24" :md="24" :lg="12" style="margin-left: 12px;">            <el-form-item>              <el-button type="primary" v-on:click="getMaintains" icon="search">查询</el-button>            </el-form-item>          </el-col>        </el-row>      </el-form>    </el-form>    <div class="panel">      <div class="panel-body">        <!--列表-->        <el-table          :data="maintains"          highlight-current-row          v-loading="listLoading"          @selection-change="selsChange"        >          <el-table-column type="selection" width="55"></el-table-column>          <el-table-column type="index" width="60"></el-table-column>          <!--<el-table-column prop="strTitle" label="维护项名称">-->          <!--</el-table-column>-->          <el-table-column label="维护项名称">            <template slot-scope="scope">              <span v-html="brightenKeyword(scope.row.strTitle, filters.strTitle)"></span>            </template>          </el-table-column>        </el-table>      </div>    </div>  </section></template></el-table-column><!--<el-table-column prop="strContent" label="维护内容">--><!--</el-table-column>--><el-table-column label="维护内容"><template slot-scope="scope">  <span v-html="brightenKeyword(scope.row.strContent, filters.strContent)"></span></template></el-table-column><el-table-column prop="createTime" label="创建时间"></el-table-column></el-table></div></div></section></template><script>import util from "../../common/js/util";//import NProgress from 'nprogress'import { getMaintainListPage } from "../../api/api";export default {  data() {    return {      myBackToTopStyle: {        right: "50px",        bottom: "50px",        width: "40px",        height: "40px",        "border-radius": "4px",        "line-height": "45px", // 请保持与高度一致以垂直居中        background: "#e7eaf1", // 按钮的背景颜色      },      filters: {        strTitle: "",        strContent: "",        createTime: "",      },      panelTitle: "维护项列表",      maintains: [],      total: 0,      listLoading: false,      sels: [], //列表选中列      form: {        strTitle: "",        strContent: "",        cStartTime: "",        cEndTime: "",      },      listQuery: {        curPage: 1,        limit: 20,        pageSize: 10,        sort: "+id",      },    };  },  methods: {    //状态显示转换    formatState: function (row, column) {      return row.state == 0 ? "未启用" : row.state == 1 ? "已启用" : "未知";    },    // 筛选变色    brightenKeyword(val, keyword) {      // val = val + '';      // if (val.indexOf(keyword) !== -1 && keyword !== '') {      // return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>')      // } else {      // return val      // }      const Reg = new RegExp(keyword, "i");      if (val) {        const res = val.replace(          Reg,          `<span style="color: #409EFF;">${keyword}</span>`        );        return res;      }    },    //刷新    on_refresh() {      this.getMaintains();    },    //获取维护项列表    getMaintains() {      let para = {        curPage: this.listQuery.curPage,        pageSize: this.listQuery.pageSize,        strOrder: "asc",        strTitle: this.filters.strTitle,        strContent: this.filters.strContent,      };      this.listLoading = true;      //NProgress.start();      getMaintainListPage(para).then((res) => {        this.total = res.data.total;        this.maintains = res.data.maintains;        this.listLoading = false;        //NProgress.done();      });    },  },  mounted() {    this.getMaintains();  },};</script><style scoped></style>

在全站搜索，关键词模糊搜索等场景下，我们希望醒目的在列表中显示被搜索的关键词，这时就需要匹配关键词在列表中高亮显示，提高用户体验。

✨原创不易，希望各位大佬多多支持。[赞]点赞，你的认可是我创作的动力。⭐️收藏，感谢你对本文的喜欢。✏️评论，你的反馈是我进步的财富。