一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第13天，点击查看活动详情。
在我们的日常开发中，在搜索框去搜索一个内容，搜索的关键字高亮是一个比较常用的功能。例如下图所示：
我们可以看到，java四个字母是高亮的状态。
那么这个功能是怎么实现的呢？
基本思路：
我们可以用正则表达式去匹配字符串，如果匹配成功了，就给他设置一个高亮的效果。
初步代码如下：
// 首先需要去 new 一个正则
// 第一个参数是你要匹配的关键字
// 第二个是你要匹配的规则
// 用一个变量去接收
const reg = new RegExp(keyWord, 'ig')
// 接下来就可以正则匹配了。
// 使用 replace 方法，它有两个参数
// 第一个是刚才接收正则的变量，
// 第二个是一个回调函数，函数的参数就是匹配到的结果
// 函数的返回值就是你最终返回的内容
const newSrt = suggtion.replace(reg, function (p) {
return '<span style={color：red}>' + p + '</span>'
})
这样就大功告成了。 但是仅仅是这样，还不够哦，如果在项目中有多处需要使用关键字高亮，每次使用都复制粘贴就比较麻烦了。所以我们可以把它进一步改造，封装成一个工具函数，每次使用的时候直接导入这个工具函数就ok啦。 下面就让我们实操一下吧。 封装：
export function hightLight (keyWord: string, suggtion: string) {
// 使用 regexp 构造函数，因为这里要匹配的是一个变量
const reg = new RegExp(keyWord, 'ig')
const newSrt = String(suggtion).replace(reg, function (p) {
return '<span style={color：red}>' + p + '</span>'
})
return newSrt
}
使用：
import { hightLight } from '@/utils'
hightLight('关键字', '关键字匹配')
返回的结果就是 关键字 是高亮的状态。
看起来是不是很简单呢？你学会了吗？
