如何为API返回并渲染到页面的数据中的指定搜索词添加加粗高亮样式

实现方案 #

你可以通过文本拆分+正则匹配的方式完成关键词高亮，具体实现如下：

第一步：封装高亮处理函数 #

这个函数会自动忽略大小写匹配关键词，同时处理关键词中的正则特殊字符避免运行报错：

const highlightKeyword = (text, keyword) => {
  // 关键词为空时直接返回原文本
  if (!keyword) return text;
  // 转义关键词中的正则特殊字符
  const escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  // 定义全局、忽略大小写的匹配规则
  const regex = new RegExp(`(${escapedKeyword})`, 'gi');
  // 拆分文本，匹配到的部分用加粗标签包裹
  return text.split(regex).map((part, index) => 
    part.match(regex) ? <strong key={index}>{part}</strong> : part
  );
}

第二步：修改原有渲染代码 #

把原来span标签中直接渲染key的位置，替换为调用上述高亮函数即可：

<center>
    {Object.keys(Disp).map((key, i) => (
      <center key={i} className="PublicationCard">
        <!-- 下方的searchValue替换为你实际存储搜索词的变量名即可 -->
        <span> {highlightKeyword(key, searchValue)}</span>
        <a href={"https://www." + Disp[key]}> View Publication</a>
      </center>
    ))}
  </center>

效果说明 #

你示例中的原文本「Discussions about Supervised Artificial Intelligence」搭配搜索词「artificial intelligence」使用时，匹配到的对应片段会自动被加粗标签包裹，渲染后符合你需要的高亮效果，同时会保留原文本的大小写格式。

内容的提问来源于stack exchange，提问作者labs