如何用Angular管道实现文本搜索高亮并显示匹配次数

你可以通过调整现有高亮管道，让它同时返回高亮后的文本和匹配次数，具体修改如下：

1. 修改高亮管道 #

让管道返回包含高亮文本和匹配次数的对象，同时修正正则转义问题（原代码里的\b在字符串中需要转义为\\b，否则会被解析为退格符），并统一样式类名：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'highlight' })
export class HighlightPipe implements PipeTransform {
  transform(value: string, searchTerm: string): { highlightedText: string, matchCount: number } {
    // 无搜索词或无文本时返回默认值
    if (!searchTerm.trim() || !value) {
      return { highlightedText: value || '', matchCount: 0 };
    }
    // 构建匹配整个单词的正则，忽略大小写、全局匹配
    const regex = new RegExp(`\\b(${searchTerm})\\b`, 'igm');
    // 统计匹配次数
    const matches = value.match(regex);
    const matchCount = matches ? matches.length : 0;
    // 替换为高亮标签
    const highlightedText = value.replace(regex, '<span class="highlight">$&</span>');
    
    return { highlightedText, matchCount };
  }
}

2. 调整组件代码 #

保留原始文本，不需要提前处理，直接在模板中通过管道转换：

export class AppComponent {
  searchText = '';
  // 替换为你的实际文本（比如pets.description）
  originalText = `somedummy text here, this text has multiple text occurrences. Text is repeated several times.`;
}

3. 更新模板显示 #

在模板中调用管道，同时展示匹配次数和高亮文本：

<div class="search-input">
  <label>Search here: </label>
  <input [(ngModel)]="searchText" type="search">
</div>

<!-- 用*ngIf缓存管道转换结果，避免重复计算 -->
<div *ngIf="(originalText | highlight: searchText) as highlightResult">
  <p>匹配次数: {{ highlightResult.matchCount }}</p>
  <div class="text-container" [innerHtml]="highlightResult.highlightedText"></div>
</div>

4. 样式保持不变 #

确保CSS中的类名和管道里的一致：

.highlight {
  background-color: violet;
  font-weight: bold;
}

说明 #

• 使用String.match()方法结合全局正则，获取所有匹配的结果数组，数组长度就是匹配次数
• 管道返回对象的方式，能在一次管道调用中同时获取高亮文本和次数，避免重复执行正则匹配
• 用*ngIf缓存管道结果，可以防止模板变更时重复调用管道，提升性能

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