react 搜索实现高亮

为了增加用户体验，都会提供一个快速搜索的功能，以便用户快速定位，但是如果进行模糊匹配的话，希望输入的关键字在搜出来的数据里面进行高亮展示，提高用户体验

技术点

---

1. font 标签

// 利用font标签可以规定文本字体、大小和颜色

<font color="red" size="5" face="arial" >测试</font>

2. dangerouslySetInnerHTML （直接在React中设置 HTML）

react 官网文档提供方法，是 React 为浏览器 DOM 提供 innerHTML 的替换方案。
通常来讲，使用代码直接设置 HTML 存在风险，因为很容易无意中使用户暴露于跨站脚本（XSS）的攻击。
因此，你可以直接在 React 中设置 HTML，但当你想设置 dangerouslySetInnerHTML 时，需要向其传递包含 key 为 __html 的对象，以此来警示你

// 例如
const Test = () => {
 return <div dangerouslySetInnerHTML={{__html: 'FIRST &middot;'}} /> 
}

实现核心代码

// 我们直接定义一个函数，替换关键字即可, 之后利用react的这个属性直接展示html字符串
    const textHightLight = (value: string, keyWord: string) => {
    	if (value.indexOf(keyWord) !== -1 && keyWord !== '') {
	  return value.replace(keyWord, `<font color="red">${keyWord}</font>`)
	}
        return value
    }

<span dangerouslySetInnerHTML={{__html: textHightLight(teststring, '测试')}} />

可以根据自己的需求进行方法调整

正则：用正则去做单行匹配，主要核心逻辑如下：

var reg =new RegExp(keyword,"g"); //定义正则  keyword是关键词

title = title.replace(reg, `<font color="red">${keyword}</font>`); //进行替换，并定义高亮的样式

交流
1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解  群号:   856402057

2、公众号：公众号「进军全栈攻城狮」 ，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！