HOW - 如何实现搜索结果关键词高亮展示 - 多个关键词版本

@PHARAOH

已于 2025-03-24 17:04:14 修改

阅读量300

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端JavaScript编程面试题学习专栏文章标签：前端

于 2025-03-23 17:31:23 首次发布

本文链接：https://blog.csdn.net/weixin_58540586/article/details/146458908

一、背景

在 HOW - 如何实现搜索结果关键词高亮展示中我们已经介绍过几种方法。其中方案 2 —— 前端处理高亮显示（后端只返回纯文本）给出了如下实现：

export const highlightKeyword = (text: string, keyword: string) => {
   
   
    if (!keyword) return text
    // 转义正则表达式中的特殊字符
    const escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
    // 创建一个正则表达式，匹配任意一个关键词，忽略大小写
    const regex = new RegExp(`(${
     
     escapedKeyword})`, "gi")
    // 分割
    const parts = text.split(regex)
    // 匹配
    return parts.map((part, index) =>
        regex.test(part) ? (
            <span key={
   
   index} style={
   
   {
   
    color: "#D7312A" }}>
                {
   
   part}
            </span>
        ) : (
            part
        )
    )
}

const SearchResults = ({
    
     results, keyword }) => {
   
   
  return results.map(item => (
    <div key={
   
   item.title}>