如何在Angular Material表格中高亮显示动态搜索关键词

要在Angular Material表格中高亮动态搜索关键词，直接用innerHTML无效的核心原因是Angular会自动转义HTML内容，同时需要正确处理字符串替换和安全校验。以下是可行的实现方案：

1. 创建高亮管道（Pipe） #

管道是Angular中处理字符串转换的最佳方式，我们用它来把关键词替换为带高亮样式的HTML，并通过DomSanitizer标记为安全内容：

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

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

  transform(text: string, searchTerm: string): SafeHtml {
    if (!searchTerm || !text) return text;
    // 忽略大小写匹配关键词
    const regex = new RegExp(`(${searchTerm})`, 'gi');
    // 用带样式的span包裹关键词
    const highlightedText = text.replace(regex, '<span class="highlight">$1</span>');
    // 标记为安全HTML，避免Angular转义
    return this.sanitizer.bypassSecurityTrustHtml(highlightedText);
  }
}

记得在你的组件模块中声明这个管道：

@NgModule({
  declarations: [HighlightPipe],
  // ...其他模块配置
})
export class YourModule {}

2. 修改表格HTML代码 #

在需要高亮的列中，用[innerHTML]绑定管道处理后的内容：

<h2>搜索关键词: {{searchTerm}}</h2>
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 序号列 -->
  <ng-container matColumnDef="position">
    <mat-header-cell *matHeaderCellDef> 序号 </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
  </ng-container>
  <!-- 名称列（高亮关键词） -->
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> 名称 </mat-header-cell>
    <mat-cell *matCellDef="let element" [innerHTML]="element.name | highlight: searchTerm"></mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

3. 添加高亮样式 #

在组件的CSS文件中定义高亮样式：

.highlight {
  background-color: #ffeb3b;
  font-weight: 600;
}

关键说明 #

• 直接用innerHTML而不处理安全校验的话，Angular会过滤掉HTML标签，导致高亮不生效，所以必须通过DomSanitizer.bypassSecurityTrustHtml标记内容为安全。
• 管道中的正则表达式用gi修饰符，实现全局、忽略大小写的匹配，适配不同的搜索场景。

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