--- # 主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate # 贡献主题：https://github.com/xitu/juejin-markdown-themes theme: juejin highlight: --- ## 背景我们一般在使用table列表的时候，为了增加用户体验，都会提供一个快速搜索的功能，以便用户快速定位，但是如果进行模糊匹配的话，希望输入的关键字在搜出来的数据里面进行高亮展示，提高用户体验 ## 技术点当用户搜索关键字的时候，将搜出来的数据里面的关键字设为不同的背景颜色 ### 1. font 标签 // 利用font标签可以规定文本字体、大小和颜色测试 ### 2. dangerouslySetInnerHTML （直接在React中设置 HTML） react 官网文档提供方法，是 React 为浏览器 DOM 提供 innerHTML 的替换方案。通常来讲，使用代码直接设置 HTML 存在风险，因为很容易无意中使用户暴露于跨站脚本（XSS）的攻击。因此，你可以直接在 React 中设置 HTML，但当你想设置 dangerouslySetInnerHTML 时，需要向其传递包含 key 为 __html 的对象，以此来警示你 // 例如 const Test = () => { return

} ## 实现核心代码 ``` // 我们直接定义一个函数，替换关键字即可, 之后利用react的这个属性直接展示html字符串 const textHight = (value: string, keyWord: string) => { if (value.indexOf(keyWord) !== -1 && keyWord !== '') { return value.replace(keyWord, `${keyWord}`) } return value } ``` ## 方法一：单个高亮 ``` 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 ? ( {beforeStr} {search} {afterStr} ) : ( {title} ); 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) => ( {str} {index === arr.length - 1 ? null : ( {keyword} )} ))} ); }; ```