以 Angular 2 突出显示搜索文本

Question

我对 Angular 2 很陌生。我正在尝试完成与上述帖子中提到的 Highlight the search text - angular 2 相同的任务。 我已经创建了管道过滤器，我的问题是我应该在哪里保留管道过滤器以及应该在哪里放置内部 html div。

复制问题：

信使会根据用户输入的内容显示搜索结果。需要在显示结果的同时突出显示正在搜索的单词。这些是使用的html和组件。

component.html

<div *ngFor = "let result of resultArray">
<div>Id : result.id </div>
<div>Summary : result.summary </div>
<div> Link : result.link </div>
</div>

组件.ts

resultArray : any = [{"id":"1","summary":"These are the results for the searched text","link":"http://www.example.com"}]

这个 resultArray 是通过发送搜索文本作为输入从命中后端服务中获取的。根据搜索文本，获取结果。需要高亮搜索到的文字，类似于google搜索。

我应该如何应用搜索过滤器以及我应该在哪里保留内部 html？

Answer 1

对于大小写的正则表达式替换有一些调整，但这里是一个起点：

//our root app component
import {Component, NgModule, VERSION, Pipe, PipeTransform} from '@angular/core'
import {BrowserModule, DomSanitizer} from '@angular/platform-browser'

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

  transform(value: any, args: any): any {
    if (!args) {
      return value;
    }
    // Match in a case insensitive maneer
    const re = new RegExp(args, 'gi');
    const match = value.match(re);

    // If there's no match, just return the original value.
    if (!match) {
      return value;
    }

    const result = value.replace(re, "<mark>" + match[0] + "</mark>");
    return this.sanitizer.bypassSecurityTrustHtml(result);
  }
}

@Component({ 
  selector: 'my-app',
  template: `
    <input (input)="updateSearch($event)">
    <div *ngFor="let result of resultArray" [innerHTML]="result.summary | highlight: searchTerm"></div>
  `,
})
export class App {
  results: string[]
  searchTerm: string;
  constructor() {
    this.resultArray = [
      {
        "id": "1",
        "summary": "These are the results for the searched text",
        "link": "http://www.example.com"
      },
      {
        "id": "2",
        "summary": "Here are some more results you searched for",
        "link": "http://www.example.com"
      }
    ]
  }
  updateSearch(e) {
    this.searchTerm = e.target.value
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, HighlightSearch ],
  bootstrap: [ App ]
})
export class AppModule {}

Plnkr

编辑：Plnkr 似乎很不高兴。 StackBlitz

Answer 2

你可以很容易地使用这个指令

用法：

<label [jsonFilter]="search">{{text}}</label>

指令

import {
      AfterViewInit,
      Directive,
      ElementRef,
      Input,
      OnChanges,
      SimpleChanges
    } from '@angular/core';
    
    @Directive({
      selector: '[jsonFilter]'
    })
    export class FilterDirective implements OnChanges, AfterViewInit {
    
      @Input() jsonFilter = '';
      constructor(
        private el: ElementRef,
      ) {
      }
    
      ngOnChanges(changes: SimpleChanges) {
        this.ngAfterViewInit();
      }
    
      ngAfterViewInit() {
        const value = this.el.nativeElement?.innerText.split('\n').join('');
        if (!value) return;
        const re = new RegExp(this.jsonFilter, 'gi');
        const match = value.match(re);
        if (!match || match.some(x => !x)) {
          this.el.nativeElement.innerText = value;
        } else {
          this.el.nativeElement.innerHTML =  value.replace(re, "<mark>" + match[0] + "</mark>")
        }
    
      }
    
    }