一分钟让你学会做搜索关键字高亮

原创已于 2022-08-10 15:10:42 修改 · 3.1k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-04-11 23:01:26 首次发布

本文介绍了如何在前端开发中实现搜索关键字高亮功能。通过正则表达式匹配字符串，匹配到的关键字设置高亮效果，并将其封装为工具函数，方便在项目中多次使用。

在我们的日常开发中，在搜索框去搜索一个内容，搜索的关键字高亮是一个比较常用的功能。例如下图所示：
我们可以看到，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('关键字', '关键字匹配')

返回的结果就是 关键字 是高亮的状态。
看起来是不是很简单呢？你学会了吗？