Angular 文字高亮顯示 [指令] [管道]

Angular 管道高亮

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

@Pipe({
  name: 'matTextlight'
})
export class MatTextLightPipe implements PipeTransform {

  constructor(public _sanitizer: DomSanitizer) {}

 /** 經過正則匹配替換方式。（若是採用這種方式請先處理特殊字符） **/
   _stringToHtml(val: string, regStr: string, color?: string, bgcolor?: string): string {
    if (!val || !regStr) {
      return val;
    }
    return  val.replace(new RegExp(regStr, 'gi'), `<mark class="mat-text-light" style="color: ${color || ''};background-color: ${bgcolor || ''}">${regStr}</mark>`);
  }

 /** 經過字符串分割替換方式。 **/
  _stringToHtml(val: string, regStr: string, color?: string, bgcolor?: string): string {
    if (!val || !regStr) {
      return val;
    }
    return val.split(regStr.trim())
              .join(`<mark class="mat-text-light" style="color: ${color || ''};background-color: ${bgcolor || ''}">${regStr}</mark>`);
  }

  transform(val: string, regStr: string, color?: string, bgcolor?: string): any {
    return this._sanitizer
    .bypassSecurityTrustHtml(this._stringToHtml(val, regStr, color, bgcolor));
  }
}

使用管道：
<!-- text : 文本  -->.
<!-- pipeSearchText : 要搜索的關鍵字  -->
<!-- color : 自定義高亮文字顏色  -->
<!-- pipeSearchText :  自定義高亮文字背景顏色  -->
<p [innerHtml]="text | matTextlight: pipeSearchText:color:bgcolor"> </p>

Angular 指令

import { Directive, Input, ElementRef, OnDestroy, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { MatTextLightPipe } from './textlight-pipe';

import { Subject, Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

export const MAT_TEXT_LIGHT_DEFAULT_DEBOUNCETIME = 300;

@Directive({
  selector: '[matTextlight]',
  exportAs: 'matTextlight',
})
export class MatTextLightDirective extends MatTextLightPipe implements OnDestroy, OnInit {

  /** Search change subject */
  private _search$ = new Subject();

  /** Search subscription */
  private _subscription: Subscription;


  constructor(public _sanitizer: DomSanitizer, private _el: ElementRef) {
    super(_sanitizer);
  }

  private _color: string;
  @Input('matTextlightColor')
  set color(value: string) {
    this._color = value;
  }
  get color(): string {
    return this._color;
  }

  private _bgcolor: string;
  @Input('matTextlightBgcolor')
  set bgcolor(value: string) {
    this._bgcolor = value;
  }
  get bgcolor(): string {
    return this._bgcolor;
  }

  private _content: string;
  @Input('matTextlight')
  set content(value: string) {
    this._content = value;
  }
  get content(): string {
    return this._content;
  }

  private _search: string;
  @Input('matTextlightSearch')
  set search(value: string) {
    this._search = value;
    this._search$.next(this._search);
  }
  get search(): string {
    return this._search;
  }

  private _highlight(value: string) {
    this._el.nativeElement.innerHTML = this._stringToHtml(this.content, value, this.color, this.bgcolor);
  }

  ngOnInit() {
    this._subscription = this._search$.pipe(
      debounceTime(MAT_TEXT_LIGHT_DEFAULT_DEBOUNCETIME),
      distinctUntilChanged()
    ).subscribe((value: string) => this._highlight(value));
    this._search$.next('');
  }

  ngOnDestroy() {
    if (this._subscription) {
      this._subscription.unsubscribe();
    }
  }
}

使用指令：
<!-- matTextlight : 文本  -->.
<!-- matTextlightSearch : 要搜索的關鍵字  -->
<!-- matTextlightColor : 自定義高亮文字顏色  -->
<!-- matTextlightBgcolor :  自定義高亮文字背景顏色  -->
<p [matTextlight]="text" [matTextlightSearch]="directiveSearch"> </p>