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

1.要匹配的内容  2.关键字

// 自封装高亮函数
  const highlight = (str: string, key: string) => {
    return str.replace(
      new RegExp(key, 'ig'),
      (match) => `<span>${match}</span>`
    )
  }

2. 调用

<div
    className="result-value text-overflow"
    // 这是react中 v-html
    dangerouslySetInnerHTML={{ __html: highlight(item, keyword) }}
  />

dangerousSInnerHTML === InnerHTML === v-html

这里通过一个类名给高亮效果