在React中封装一个高亮函数，保存到处可用

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。

日常开发中搜索框的联想功能需要有一个高亮效果，其他的场景也有时也需要用到高亮，所以我们封装一个高亮函数，需要使用的时候直接调用即可

先看效果图

这里我们需要使用replace这个方法

格式

在目标字符串中，用正则做匹配，如果匹配到，就用参数2的返回值来替代匹配的部分
const 新字符串 = 目标字符串.replace(正则表达式，function(匹配结果) {
           return 对匹配到的内容的替换结果
})

封装高亮函数utils/index.ts中

//需要在str里替换(也就是查找目标)，keyword是需要被替换的目标
const highLight = (str: string， keyword: string) => {

return str.replace(

//这里使用new RegExp实例，是因为keyword是传过来的变量，不能使用//这种语法
//查找规则是i:ignore - 不区分大小写，g:global - 全局匹配
new RegExp(keyword, 'gi'),

match就是新的字符串，这里用span标签包裹，可以根据项目需求改变
(match) => `<span>${match}</span>`
  )
}

在组件中使用时，需要使用dangerouslySetInnerHTML

dangerouslySetInnerHTM相当于是react中的innerHTML，可以将html解析到页面

示例

<div>{'abc'}</div>
  <div>{'<h1>abc</h1>'}</div>
  <div dangerouslySetInnerHTML={{ __html: '<h1>abc</h1>' }} />
  

在组件中使用高亮函数

//item是查找的目标，key是需要替换的字符串，这里是搜索框里输入的值
dangerouslySetInnerHTML={{ __html: highlight(item, key) }}