react 搜索框高亮关键字 （函数封装）

1.目标

搜索框搜索时输入的内容高亮起来，使用String.prototype.replace完成函数封装

2. String.prototype.replace

链接：https://developer.mozilla.org/zhCN/docs/Web/JavaScript/Reference/Global_Objects/String/replace

格式：

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

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

3. 封装高亮函数

敲黑板!!! 我这里是对span做了处理的(被span包起来就可以高亮)

  /**
   * 传入两个参数
   * @param str 目标字符串（需要被筛选的字符串）
   * @param keyword 筛选条件（筛选需要高亮的字符串）
   * @returns 返回处理后字符串
   */
const highLight = (str， keyword) => { 
  return str.replace(new RegExp(keyword, 'gi'), (match) => {
		return `<span>${match}</span>`
	}
  )
}

4.使用高亮函数

• react中是不能直接将 字符串中的标签 进行渲染，如下标签会被当做字符串渲染
  

4.1.react的innerHTML----------dangerouslySetInnerHTML

dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 innerHTML 的替换方案。
格式：

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

4.2.使用高亮函数

//highLight(item，value) 第一个参数是需要做处理的字符串   第二个需要高亮的字样
<div
  className="result-value text-overflow"
  dangerouslySetInnerHTML={{
    __html: highLight(item)
  }}
></div>

附图