Angular如何实现敏感文字自动过滤并友好提示？

在Web应用开发中,内容安全是保障用户体验和平台合规性的重要环节，敏感文字过滤功能能够有效防止不良信息传播，尤其适用于社交平台、内容管理系统、评论模块等场景，本文将以Angular框架为例，详细介绍如何实现一套敏感文字自动过滤与提示功能，涵盖技术原理、代码实现、优化策略及完整示例。

功能需求与技术选型

敏感文字过滤功能的核心需求包括：实时检测用户输入内容中的敏感词、自动替换或拦截敏感信息、向用户友好的提示过滤结果，在Angular项目中，可通过以下技术栈实现：

• 核心依赖：Angular 12+、RxJS（响应式编程）、TypeScript（类型安全）
• 敏感词库：采用本地JSON文件存储敏感词列表，或对接第三方API服务
• 过滤策略：支持精确匹配、模糊匹配（如正则表达式）、分级过滤（如轻度/敏感/严重违规）

技术选型时需考虑性能与可维护性,本地词库响应速度快但更新滞后，API服务实时性强但依赖网络，本文以本地词库为例，结合RxJS的debounceTime实现防抖过滤，避免频繁操作影响性能。

敏感词库设计与加载

词库结构设计

敏感词库采用JSON格式存储,支持分类和权重配置。

{
  "sensitiveWords": [
    {"word": "违规词1", "level": "high", "category": "政治"},
    {"word": "违规词2", "level": "medium", "category": "广告"}
  ]
}

词库服务实现

创建SensitiveWordService服务，负责加载和管理词库：

@Injectable({ providedIn: 'root' })
export class SensitiveWordService {
  private sensitiveWords: string[] = [];
  constructor(private http: HttpClient) {}
  loadWords(): Observable<void> {
    return this.http.get('/assets/sensitive-words.json').pipe(
      tap((data: any) => {
        this.sensitiveWords = data.sensitiveWords.map((item: any) => item.word);
      }),
      map(() => void 0)
    );
  }
  getWords(): string[] {
    return this.sensitiveWords;
  }
}

在app.module.ts中通过APP_INITIALIZER异步加载词库：

providers: [
  {
    provide: APP_INITIALIZER,
    useFactory: (service: SensitiveWordService) => () => service.loadWords(),
    deps: [SensitiveWordService],
    multi: true
  }
]

敏感文字过滤核心逻辑

过滤管道（Pipe）实现

创建SensitiveFilterPipe，用于转换文本内容：

@Pipe({ name: 'sensitiveFilter', pure: false })
export class SensitiveFilterPipe implements PipeTransform {
  constructor(private sensitiveWordService: SensitiveWordService) {}
  transform(value: string, replaceChar: string = '*'): string {
    if (!value) return value;
    const words = this.sensitiveWordService.getWords();
    let filteredText = value;
    words.forEach(word => {
      const regex = new RegExp(word, 'gi');
      filteredText = filteredText.replace(regex, replaceChar.repeat(word.length));
    });
    return filteredText;
  }
}

实时检测与提示组件

开发SensitiveInputComponent，实现输入框的实时过滤和提示：

@Component({
  selector: 'app-sensitive-input',
  template: `
    <input 
      [(ngModel)]="inputValue" 
      (ngModelChange)="onInputChange($event)"
      placeholder="请输入内容"
    >
    <div *ngIf="filteredText !== inputValue" class="warning-tip">
      输入包含敏感词，已自动替换为：{{ filteredText }}
    </div>
  `,
  styles: [`
    .warning-tip {
      color: #ff4d4f;
      font-size: 12px;
      margin-top: 4px;
    }
  `]
})
export class SensitiveInputComponent {
  @Input() replaceChar = '*';
  inputValue = '';
  filteredText = '';
  constructor(private sensitiveWordService: SensitiveWordService) {}
  onInputChange(value: string): void {
    this.filteredText = this.applyFilter(value);
  }
  private applyFilter(text: string): string {
    // 复用SensitiveFilterPipe逻辑
    const pipe = new SensitiveFilterPipe(this.sensitiveWordService);
    return pipe.transform(text, this.replaceChar);
  }
}

性能优化与用户体验提升

防抖处理

为避免高频输入导致性能问题,使用RxJS的debounceTime：

ngOnInit(): void {
  this.inputValue$.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(value => this.filterText(value))
  ).subscribe(filteredText => {
    this.filteredText = filteredText;
  });
}
onInputChange(value: string): void {
  this.inputValue$.next(value);
}

敏感词匹配策略优化

对于中小型应用,精确匹配已足够；若需处理大量词库，建议引入ac-automaton等第三方库。

用户提示设计

提示信息需明确且不干扰操作,可采用以下方案：

• 实时替换：输入时自动替换敏感词，显示替换后的文本
• 侧边提示：在输入框旁显示敏感词数量及类型
• 批量审核：对提交内容进行二次校验，违规时拦截并提示修改

完整示例与使用方法

模块配置

在app.module.ts中声明相关组件和管道：

declarations: [
  SensitiveFilterPipe,
  SensitiveInputComponent
],
exports: [SensitiveFilterPipe]

页面调用

在模板中使用组件：

<app-sensitive-input 
  [replaceChar]="#"
  (ngModelChange)="logInput($event)">
</app-sensitive-input>

测试用例 | 过滤结果 | 提示信息 |

|——————|————————|—————————-|
| “这是一个测试” | “这是一个测试” | 无 |
| “包含违规词” | “包含**” | 输入包含敏感词，已自动替换 |
| “AdmIn” | “***” | 不区分大小写匹配 |

扩展功能与安全建议

1. 动态更新词库：通过HTTP请求定期拉取最新词库，或提供管理员后台界面维护。
2. 分级过滤：根据敏感词级别决定是否拦截或仅替换，

   filterByLevel(text: string, level: 'high' | 'medium'): string {
     const words = this.sensitiveWordService.getWords()
       .filter(word => this.getWordLevel(word) === level);
     // 应用过滤逻辑
   }

3. 日志记录：对过滤操作进行日志记录，便于审计和优化词库。
4. 安全防护：避免XSS攻击，对输出内容进行DomSanitizer处理。

通过以上实现,Angular应用可具备完善的敏感文字过滤能力，既能保障内容安全，又能提供良好的用户体验，实际开发中可根据业务需求调整过滤策略和交互细节，实现功能与性能的平衡。