HTML5标签在React中的使用方法

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《HTML5重点标注在React中的实现思路》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

React中应封装highlightText函数安全高亮文本，用语义化标签仅限搜索高亮等场景，避免XSS和a11y问题，需正则转义、useMemo缓存、显式样式重置。

React 里不用 标签也能实现重点标注，但要用对语义

HTML5 的 是语义化标签，表示“文档中需要引起注意的文本”，比如搜索关键词高亮、引用中的强调部分。在 React 中直接写 重要 没问题，但真实项目里往往要动态匹配、支持嵌套、避免 XSS、兼顾可访问性（a11y）——这时候硬写原生 就容易翻车。

常见错误现象： 被当成样式工具滥用（比如全篇黄色背景），结果屏幕阅读器读作“mark”而非“强调”，语义丢失；或者用 dangerouslySetInnerHTML 渲染带 的 HTML 字符串，没做转义导致 XSS。

• 真正该用 的场景：搜索结果高亮、法律条文关键条款、用户输入关键词实时匹配
• 不该用的场景：仅为了视觉突出（此时用 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 样式必须重置 默认行为

浏览器对 有默认黄色背景 + 黑色文字，但 React 项目通常走 CSS-in-JS 或模块化 CSS，直接依赖默认样式会和主题冲突。

• 必须显式设置 background-color 和 color，否则暗色模式下不可读
• 加 padding 和 border-radius 提升可点击区域和视觉识别度
• 若需 hover 效果（如点击跳转到定义处），得用 span 替代 并手动加 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，而不是硬扛。

今天关于《HTML5标签在React中的使用方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！