在Angular中使用Pipe高亮搜索结果中的不匹配文本

核心思路 #

将目标文本按搜索关键词分割为「匹配片段」与「不匹配片段」的交替数组，仅对不匹配片段添加高亮样式，匹配片段保持原样输出，以此实现类似谷歌搜索的不匹配内容高亮效果。

具体实现步骤 #

1. 修改高亮管道逻辑
   替换原有匹配高亮的管道，改为针对不匹配片段处理：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({ name: 'highlightUnmatched' })
export class HighlightUnmatchedPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(text: string, searchTerm: string): SafeHtml {
    if (!searchTerm.trim()) {
      return this.sanitizer.bypassSecurityTrustHtml(text);
    }

    // 带捕获组的正则，确保split后保留匹配的关键词片段
    const regex = new RegExp(`(${searchTerm})`, 'gi');
    const textParts = text.split(regex);

    // 遍历分割数组：偶数索引为不匹配片段，奇数为匹配片段
    const highlightedText = textParts
      .map((part, index) => {
        return index % 2 === 0 
          ? `<span class="unmatched-highlight">${part}</span>` 
          : part;
      })
      .join('');

    return this.sanitizer.bypassSecurityTrustHtml(highlightedText);
  }
}

2. 添加不匹配文本的高亮样式
   在组件CSS中定义专属样式，区分原匹配高亮：

/* 不匹配文本的高亮样式 */
.unmatched-highlight {
  background-color: #ffebee; /* 浅红色背景，直观区分不匹配内容 */
  opacity: 0.8;
}

/* 若保留原匹配高亮样式可继续使用 */
.highlight {
  background-color: #ffff00;
}

3. 模板中替换管道使用
   将原有匹配高亮管道替换为新的不匹配高亮管道：

<div [innerHTML]="item | highlightUnmatched: searchTerm"></div>

关键细节说明 #

• 正则捕获组：使用(${searchTerm})捕获组，确保split方法保留匹配的关键词片段，精准区分匹配/不匹配内容。
• 安全处理：必须通过DomSanitizer处理生成的HTML字符串，避免Angular的安全拦截机制阻止渲染。
• 空值兼容：当搜索关键词为空时直接返回原文本，避免无效DOM操作。

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