# 1. 背景在我们的日常开发中，在搜索框去搜索一个内容，搜索的关键字高亮是一个比较常用的功能。最近的项目需要实现搜索关键词进行高亮展示的效果,写篇文章记录一下实现过程。下面来看看实现效果。 # 2. 效果演示 ![vue2-admin-grace.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a7b81cd8b3742f7b1cd7e9b071ba5ef~tplv-k3u1fbpfcp-zoom-1.image) # 3. 整体思路通过接口获取到后端返回的列表数据，对返回的数据进行操作，匹配到搜索关键词后,使用replace进行字符串的替换， html部分使用v-html进行动态展示即可实现。 # 4. 实现方法 ## 4.1 使用indexOf进行匹配如果val包含关键词keyword，就将keyword替换为高亮样色封装方法 ```javascript brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && keyword !== '') { return val.replace(keyword, '' + keyword + '') } else { return val } } ``` ## 4.2 使用正则表达式进行匹配如果val包含关键词keyword，就将keyword替换为高亮样色封装方法 ```javascript brightenKeyword(val, keyword) { const Reg = new RegExp(keyword, 'i'); if (val) { return val.replace(Reg, `${keyword}`); } } ``` # 5. 使用案例 ```javascript ``` # 6. 完整代码 ```javascript ``` # 7. 使用场景在全站搜索，关键词模糊搜索等场景下，我们希望醒目的在列表中显示被搜索的关键词，这时就需要匹配关键词在列表中高亮显示，提高用户体验。详情点击[开源项目地址](https://github.com/artdong/vue2-admin) --- ✍创作不易，求关注😄，点赞👍，收藏⭐️