react+antd实现搜索文本匹配并高亮

废话不多说，直接抄代码，这是json文本的处理方式，理解思路也可以改成其他类型文本

import manualData from '../../data/manual.json'
import { useState } from "react";
import {Input} from 'antd';

export const ManualHighLight=() => {
    const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const [manualSearchParam, setmanualSearchParams] = useState<string>(''); // 用于转义正则特殊字符

const HighlightedContent = ({ item, searchParam }) => {
    const highlightMatch = (text) => {
      const regex = new RegExp(`(${escapeRegExp(searchParam)})`, 'gi')
      return text.split(regex).map((segment, index) => {
        if (!searchParam) {
            // 如果 searchParam 为空，直接返回原始 segment，无需高亮处理
            console.log(segment)
            return segment;
          } else {
            // 如果 searchParam 非空，检查 segment 是否匹配正则表达式
            return regex.test(segment) ? (
              <span key={index} style={{ color: 'yellow' }}>
                {segment}
              </span>
            ) : (
              segment
            );
          }
      }
    );
    };
    return (
      <div style={{ marginTop: 30 }}>
        <h2 style={{color:'black'}}>{highlightMatch(item.title)}</h2>
        <h4 style={{color:'black'}}>{highlightMatch(item.content)}</h4>
      </div>
    );
  };
  
const HighLightList = ({ manualSearchParam }) => {
    return (
      <div>
        {manualData.map((item, index) => (
          <HighlightedContent key={index} item={item} searchParam={manualSearchParam} />
        ))}
      </div>
    );
  };
    return (
        <div>
             <Input.Search 
             placeholder="输入关键字"
             enterButton="搜索"
             onSearch={(value) => setmanualSearchParams(value)}
             />
            <HighLightList manualSearchParam={manualSearchParam} />
        </div>
    )
}