react高亮搜索内容

主要实现方式利用正则替换文本中的搜索关键字

关键代码，

const keyword='搜索内容'；
/*
*@param text:string 需要展示的内容
const highlightText = (text: string) => {
        const highlightStr = `${keyword}`;
        // new 出来一个正则表达式reg>根据动态数据变量来创建
        // 参数一 将 keyword的值解析成字符串,并根据这个创建正则表达式,
        // 参数二 匹配模式  "gi"
        const reg = new RegExp(keyword, "gi");
        return text.replace(reg, highlightStr);
 }

使用，

export default function SearchItem(props: SearchItemProps) {
   
    const { keyword, item } = props;
    
    const highlightText = (text: any) => {
        const highlightStr = `${keyword}`;
        const reg = new RegExp(keyword, "gi");
        return text.replace(reg, highlightStr);
    }
    return (
            

    );
}