react中搜索模块 字体高亮的实现

通常我们在搜索时会遇到需要你当前输入的值高亮如下这一种效果

下面是我的解决思路 

 你所需掌握的知识:  

String.prototype.replace     dangerouslySetInnerHTML

 const 新字符串 = 目标字符串.replace(正则表达式，function(匹配结果) {
               return 对匹配到的内容的替换结果
})

 dangerouslySetInnerHTML={{
    __html: 'First · Second'
  }}

 封装高亮函数

第一个参数为你的字符串

第二个参数为你需要高亮的字符串

const highLight = (str: string， keyword: string) => {
  return str.replace(
    new RegExp(keyword, 'gi'),
    (match) => `<span>${match}</span>`
  )
}

使用

<div
  className="result-value text-overflow"
  dangerouslySetInnerHTML={{
    __html: highLight(item)
  }}
></div>

不过使用dangerouslySetInnerHTML你需要防止xss攻击 具体怎么解决可以看我其他博客