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
}
}
4.2 使用正则表达式进行匹配
如果val包含关键词keyword，就将keyword替换为高亮样色
封装方法
brightenKeyword(val, keyword) {
const Reg = new RegExp(keyword, 'i');
if (val) {
return val.replace(Reg, `<span style="color: #409EFF;">${keyword}</span>`);
}
}
5. 使用案例
<el-table-column label="维护内容">
<template slot-scope="scope">
<span v-html="brightenKeyword(scope.row.strContent, filters.strContent)" ></span>
</template>
</el-table-column>
6. 完整代码
<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-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>
7. 使用场景
在全站搜索，关键词模糊搜索等场景下，我们希望醒目的在列表中显示被搜索的关键词，这时就需要匹配关键词在列表中高亮显示，提高用户体验。
详情点击开源项目地址
✍创作不易，求关注😄，点赞👍，收藏⭐️
