react中应封装highlighttext函数安全高亮文本，用语义化标签仅限搜索高亮等场景，避免xss和a11y问题，需正则转义、usememo缓存、显式样式重置。
React 里不用 <mark></mark> 标签也能实现重点标注，但要用对语义
HTML5 的 <mark></mark> 是语义化标签，表示“文档中需要引起注意的文本”，比如搜索关键词高亮、引用中的强调部分。在 React 中直接写 <mark>重要</mark> 没问题，但真实项目里往往要动态匹配、支持嵌套、避免 XSS、兼顾可访问性（a11y）——这时候硬写原生 <mark></mark> 就容易翻车。
常见错误现象：<mark></mark> 被当成样式工具滥用（比如全篇黄色背景），结果屏幕阅读器读作“mark”而非“强调”，语义丢失；或者用 dangerouslySetInnerHTML 渲染带 <mark></mark> 的 HTML 字符串，没做转义导致 XSS。
- 真正该用
<mark></mark>的场景：搜索结果高亮、法律条文关键条款、用户输入关键词实时匹配 - 不该用的场景：仅为了视觉突出（此时用
span+ CSS 类更合适） - React 中推荐封装为函数组件，不直接拼接字符串或 DOM
用 highlightText 函数做安全分段匹配
核心是把原始文本按关键词切片，返回 React 元素数组。不能用正则全局替换字符串再塞进 dangerouslySetInnerHTML —— 那会丢掉 props、事件绑定能力，也难控制样式作用域。
示例逻辑（简化版）：
立即学习“前端免费学习笔记（深入）”；
function highlightText(text: string, keyword: string) {
if (!keyword.trim()) return [text];
const regex = new RegExp(`(${keyword.replace(/[.*+?^${}()|[]\]/g, '\$&')})`, 'gi');
return text.split(regex).map((part, i) =>
regex.test(part) ? <mark key={i}>{part}</mark> : <span key={i}>{part}</span>
);
}
- 关键词需正则转义，否则
keyword = "a+b"会导致split失败 - 用
span包裹非匹配部分，保证返回值全是 React 元素，类型安全 - 避免用
key={Math.random()}，这里用索引足够（因分割后顺序固定）
CSS 样式必须重置 <mark></mark> 默认行为
浏览器对 <mark></mark> 有默认黄色背景 + 黑色文字，但 React 项目通常走 CSS-in-JS 或模块化 CSS，直接依赖默认样式会和主题冲突。
- 必须显式设置
background-color和color，否则暗色模式下不可读 - 加
padding和border-radius提升可点击区域和视觉识别度 - 若需 hover 效果（如点击跳转到定义处），得用
span替代<mark></mark>并手动加role="mark"保 a11y
推荐最小化样式：
mark {
background-color: #ffeb3b;
color: #212121;
padding: 0 2px;
border-radius: 2px;
}
复杂场景要用 useMemo 缓存匹配结果
当文本长、关键词多、或频繁更新（如搜索框实时过滤），每次渲染都重新 split + 正则匹配会拖慢性能。尤其在列表项中重复使用时，没缓存等于白优化。
- 用
useMemo(() => highlightText(text, keyword), [text, keyword])避免重复计算 - 如果关键词是正则对象（比如忽略大小写、支持通配），记得把它也作为依赖项传入
useMemo - 服务端渲染（SSR）时，确保
highlightText不依赖 window 或 DOM API
最易被忽略的一点：当文本含 HTML 实体（如 ）、Unicode 组合字符、或零宽空格时，split 可能错位。这种时候得改用 textContent 解析或专用库如 highlight-words-core，而不是硬扛。
