持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

一.使用背景说明

在搜索框中搜索时，将搜索框内容当做关键字搜索出相关内容进行效果展示，并将关键字高亮

二.效果演示

三.思路分析

四.String.prototype.replace

官方链接

简单说明：

在不改变调用它的字符串本身得到一个部分或全部匹配由替代模式所取代的新的字符串

使用格式：

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

功能分析：

在目标字符串中，用正则做匹配，如果匹配到，就用参数2的返回值来替代匹配的部分

五.封装高亮函数

代码实现：

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

注：这里使用的是箭头函数，与上方格式稍有差异，具体含义如下

•  highLight：新字符串
  

•  str：目标字符串
  

•  keyword：匹配结果
  

•  RegExp：正则表达式
  

•  match： 匹配的字符串
  

•  'gi' 如下图
  

六.react中的innerHTML

官方链接

简单说明：

使用代码直接设置 HTML 存在风险，你可以在 React 中设置设置 dangerouslySetInnerHTML从而控制 HTML，但需要传递一个包含 key 为 __html 的对象

使用格式：

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

七.代码实现：

      <div className={classnames('search-result', keyword.length ? 'show' : '')}>
       {
           suggestion.map((item, index) => {
             return (
         <div className="result-item" onClick={() => onSearch(item)} key={index}>
            <Icon className="icon-search" type="iconbtn_search" />
           <div className="result-value text-overflow"
       +    dangerouslySetInnerHTML={{ __html: highLight(item) }}
           >
         </div>
       </div>
             )
           })
       }
      </div>