React实现文字高亮

在项目开发中遇到一个头疼的问题，就是在搜索数据后渲染的同时把框出来的部分命中搜索关键词经行高亮，如果是普通的字符串高亮很简单，调用_match方法就行了当然，可以直接返回jsx（代码中被注释的部分），但是如图，不是纯文本，里面掺杂中表情的img标签，也有可能是提交的代码块，比如：

dal;jksdajk[闭嘴][闭嘴][大哭][再见][亲亲][示爱][哈欠]dajalkjg <img src=“eeee.png” alt=“图片” />@cp1 @cp2

其中img标签是不允许被破坏的，所以就需要对文本进行抽取其中的html标签部分后在重新生成新的高亮后的字符串或jsx，在react中通过 dangerouslySetInnerHTML经行解析，最终实现效果如下图

  const _match = (keyword, content) => {
    const reg = new RegExp(keyword.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), 'ig')

    const splitIconTypes = content.split(reg)
    const match = content.match(reg)
    let matchStr = (match || [])
      .map((_, index) => {
        return `${