关键字搜索高亮显示

最新推荐文章于 2024-02-07 10:58:56 发布

西瓜3188

最新推荐文章于 2024-02-07 10:58:56 发布

阅读量602

点赞数

分类专栏： react+ant 文章标签： ant react

本文链接：https://blog.csdn.net/xigua3188/article/details/125447290

版权

react+ant 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

前端项目是react+antd, 现在需求是一个页面有一个搜索框和表格，搜索框里输入内容显示到表格里，并且高亮显示。以下是代码。

 render: (text, record) => {
        if (keyWord !== '' && text.name.indexOf(keyWord) >= 0) {
          const reg = new RegExp(keyWord);
          const splitText = text.name.split(reg);
          const matchText = text.name.match(reg);
          let highText = <Text mark>{keyWord}</Text>;
          // return (
          //   <React.Fragment>
          //     {matchText.map((_, index) => {
          //       return (
          //         <React.Fragment key={index}>
          //           <span>{splitText[index]}</span>
          //           <span className="icon-mark">{matchText[index]}</span>
          //         </React.Fragment>
          //       );
          //     })}
          //     <span>{splitText[splitText.length - 1] || ''}</span>
          //   </React.Fragment>
          // );
          return (
            <span
              dangerouslySetInnerHTML={{
                __html: text.name.replace(keyWord, `<font color="#ff4d4f">${keyWord}</font>`),
              }}
            />
          );
        }
        return text.name;
      },