react 搜索实现高亮

背景

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

技术点

当用户搜索关键字的时候，将搜出来的数据里面的关键字设为不同的背景颜色

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 textHight = (value: string, keyWord: string) => {
    	if (value.indexOf(keyWord) !== -1 && keyWord !== '') {
	  return value.replace(keyWord, `<font color="yellow">${keyWord}</font>`)
	}
        return value
    }

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

方法一： 单个高亮

const hasSearch = (title: string, search: string) => {
    const index = title.indexOf(search);
    const beforeStr = title.substr(0, index);
    const afterStr = title.substr(index + search.length);
    const titles =
      index > -1 ? (
        <span>
          {beforeStr}
          <span className={styles['highlight']}>
            {search}
          </span>
          {afterStr}
        </span>
      ) : (
        <span>{title}</span>
      );
    return titles;
  };

方法二 ：全部高亮

export const Mark = ({ name, keyword }: { name: string; keyword: string }) => {
  if (!keyword) {
    return <>{name}</>;
  }
  const arr = name.split(keyword);
  return (
    <>
      {arr.map((str, index) => (
        <span key={index}>
          {str}
          {index === arr.length - 1 ? null : (
            <span style={{ color: "#257AFD" }}>{keyword}</span>
          )}
        </span>
      ))}
    </>
  );
};