【React】搜索时高亮被搜索选中的文案

文章目录

代码实现

函数封装:

ts 复制代码
export function highlightKeyword(input: string, keyword: string | undefined) {
  if (!keyword || !input || !input.includes(keyword)) return input;

  const startIndex = input.indexOf(keyword);

  return React.createElement('span', null, [
    input.substring(0, startIndex),
    React.createElement(
      'span',
      {
        style: {
          backgroundColor: 'rgba(255, 255, 0, 0.8)',
          color: 'black',
        },
      },
      keyword,
    ),
    input.substring(startIndex + keyword.length),
  ]);
}

使用案例:

js 复制代码
import React from 'react';
import { Tree } from 'antd';

const { DirectoryTree } = Tree;

const treeData = [
  {
    title: '目录1',
    key: '1',
    children: [
      { title: '目标目录', key: '1-1' }, // 此节点名称会显示为红色
      { title: '子目录2', key: '1-2' },
    ],
  },
  {
    title: '目录2',
    key: '2',
  },
];

const App = () => {
  const [searchText, setSearchText] = useState('')
  return <div>
  			<Input placeholder="请输入搜索文案" onChange={(e)=>setSearchText(e.target.value)} />
  			<DirectoryTree
    			treeData={treeData}
    			titleRender={(nodeData) => {
      				return (
        				<span style={{ color: isMatched ? 'red' : 'inherit' }}>
          					{searchText ? highlightKeyword(nodeData.title, searchText) : nodeData.title}
        				</span>
      				);
    			}}
  			/>
  		</div>
};

export default App;
相关推荐
蒙特卡洛的随机游走4 分钟前
Spark的宽依赖与窄依赖
大数据·前端·spark
共享家952711 分钟前
QT-常用控件(多元素控件)
开发语言·前端·qt
幸运小圣12 分钟前
Iterator迭代器 【ES6】
开发语言·javascript·es6
葱头的故事13 分钟前
将传给后端的数据转换为以formData的类型传递
开发语言·前端·javascript
中微子24 分钟前
🚀 2025前端面试必考:手把手教你搞定自定义右键菜单,告别复制失败的尴尬
javascript·面试
_233325 分钟前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·vue.js
jump68028 分钟前
js中数组详解
前端·面试
崽崽长肉肉31 分钟前
iOS 基于Vision.framework从图片中提取文字
前端
温宇飞37 分钟前
Web Abort API - AbortSignal 与 AbortController
前端
Tomoon38 分钟前
前端开发者的全栈逆袭
前端