React 搜索框 封装关键字高亮函数

思路：

函数需要传入两个参数，第一个参数为被查询的元素，第二个参数为查询的关键字。
给查询到的关键字用包裹
实现代码如下：

// 封装高亮函数(被查询的元素，查询字符)
function highLight (str: string, keyword: string) {
  // 使用replace通过正则查找keyword里对应的字符 (区分大小写)，(match)是匹配的字符，返回一个模板字符串给查询到的关键字添加标签
  return str.replace(RegExp(keyword, 'ig'), (match) => {
    return `${match}`
  })
}

调用这个函数：

现在可以得到如下效果：

在react中也提供了一个属性可以帮我们将dom字符串转化为dom节点： dangerouslySetInnerHTML

基本使用方法：

<div dangerouslySetInnerHTML={{__html: '跳转'}}></div>

使用：（css样子自己设置）

效果：