实现功能：
- 根据给出关键字，匹配到数据后，加背景色，然后再次搜索此关键字时，逐个匹配并加背景色高亮显示
- 手动修改待匹配项内容，再次搜索匹配
实现思路：
1.将待匹配项wholeStr，分为两个部分。一个是front，记录匹配项之前的字符；一个是back，记录匹配项及后面的数据，其中，back分为两部分，一个是匹配项，一个是剩余部分。最初font = '',back = wholeStr
2.当拿到搜索条件时，首先查找整串中是否有匹配项，如果没有，就提示不存在；否则继续下一步
3.通过search，拿到匹配项在wholeStr中的下标时，front = wholeStr.substring(0,index),back = wholeStr.substring(index)，然后back通过replace找出匹配项，split将back分为两部分，一部分为back[0]匹配项，一部分back[1]为剩余部分，最终遍历back展示，将匹配项用span包裹，添加背景色
4.当点击搜索时，对比当前搜索关键字和之前的关键字，如果一致，则开始对剩余部分back[1]进行匹配，重复上面的步骤，直到剩余部分找不到该关键字，就直接从最初的整串开始匹配
- 当点击搜索时，对比当前搜索关键字和之前的关键字，如果不一致，则直接从头开始匹配，
front``back都变为最初值
上面是找到关键字并添加背景色的功能
补充，这些待匹配项是放在<div contentEditable={true} onInput={e=>handleInput(e.currentTarget.textContent)}>...<div>
- 通过监听input方法，可以拿到用户修改div后所有的内容，并赋值给
wholeStr,front=''back=wholeStr，并重新开始搜索
重点：
此时遇到一个问题,就是在上图第一个匹配项234后加任意字符，例如5,后面匹配的234都会加上5，变成23455,1234,2345,再点击搜索变成2345,12345,2345，后面发现是back在map遍历时，span没有加上唯一key，导致这个span没有重新渲染
总结：
1、div加上contentEditable属性，可编辑 ，如果有提示警告，加上suppressContentEditableWarning
2、react map遍历渲染时加上唯一key
