react搜索关键字高亮

需求：

模糊搜索下拉列表选择选项根据关键字高亮显示

思路：

利用正则从列表匹配到关键词，再使用标签包含关键词，

给标签添加color属性，使用react富文本渲染方式进行渲染

 /**
     * 关键字变色
     * @params content 内容
     * @params keyword 关键词
     * @params tagName 标签名
    */
    tagKeywords(content, keyword, tagName) {
      if (!content) {
        return content
      }
      const a = content.toLowerCase()
      const b = keyword.toLowerCase()
      const indexof = a.indexOf(b)
      const c = indexof > -1 ? content.substr(indexof, keyword.length) : ''
      const val = `<${tagName} style="color:#F40;">${c}</${tagName}>`
      const reg = new RegExp(keyword, 'gi')
      return content.replace(reg, val)
    }

引用：

<div dangerouslySetInnerHTML={{__html: this.tagKeywords('<div>测试模板</div>', '测试', "span")}}></div>