javascript - 如何突出显示用于使用 Angular 进行搜索的字母表

Question

我需要突出显示搜索列表中的字母而不是突出显示整个单词。在这里，我根据我在搜索中提供的字母表过滤 memberOffice 列表和 memberFacilities，因此整个子项都被突出显示。但现在基于过滤后的内容而不是突出显示整行，我需要突出显示我用于搜索的特定字母表，如果它也超过 1 个字母表，则需要突出显示。所以基本上，我需要根据我在搜索字段中输入的字母表突出显示过滤列表中的字母表。需要帮助。

提前致谢。

TS:

searchFacility(search) {
    this.sLetter = search;
    let memberFacilities = true;
    if (search) {
      this.dtFacilities.expandedRows = [];
      setTimeout(() => {
        this.dtFacilities.expandedRows = this.dtFacilities.value;
        this.dtFacilities.value.forEach(m => {
          m.memberFacilities.forEach(f => {
            let mySearch = search.toLowerCase();
            let facilityName = f.facilityName.toLowerCase();
            if (facilityName && facilityName.includes(mySearch)) {
              f.isShowMember = false;
              memberFacilities = false;
            } else {
              f.isShowMember = true;
            }
          })
        })
        if (memberFacilities) {
          this.dtFacilities.expandedRows = [];
        } 
      }, 100);

    }

  }

}

在 HTML 中，我使用了

[class.searcHighlight]

我正在使用这组代码突出显示整个单词。我需要做一些改变，但我不知道如何解决。

fList 的 HTML:

<p-column field="facilityName" header="Medical Office Name" [sortable]="true">
          <ng-template let-col let-fList="rowData" pTemplate="body">
            <span>
              <a (click)="selectedFacility(fList.facilityID)" [innerHtml]="fList.facilityName | getHtml : sLetter">
                <strong>{{fList.facilityName}}</strong>
              </a>
              (
              <span>{{fList.facilityType}}</span>)
            </span>
          </ng-template>
        </p-column>
DEMO:

Demo

Answer 1

将以下内容添加到您的代码中

app.component.ts

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


    @Pipe({ name: 'getHtml' })
export class HighlihtText implements PipeTransform {
  constructor(private sanitized: DomSanitizer) { }
  transform(value, searchText) {
    if(searchText=='' || !searchText){
      return value;
    }
    console.log("value="+value)
    var str = value.toLowerCase();
    searchText=searchText.toLowerCase();
    var currHtml = "";
    var ind = -1;
    while (str.indexOf(searchText) >= 0) {
      ind = str.indexOf(searchText);
      createHtml(value.substr(0, ind),value.substr(ind,searchText.length))
      str = str.substr(ind + searchText.length)
      value=value.substr(ind + searchText.length);
    }
    if (str.length > 0) {
      currHtml = currHtml + str;
    }
    function createHtml(nohighlighText,match) {
      console.log(nohighlighText)
      currHtml = currHtml + nohighlighText + "<span class=\"searcHighLight\" >" + match + "</span>"
    }
    return this.sanitized.bypassSecurityTrustHtml(currHtml);
  }

}

在 app.component.html 中，将突出显示搜索结果的部分更改为

<a class="userlist" (click)="selectedFacility(memberFacility.facilityID)" [innerHtml]="memberFacility.facilityName | getHtml : sLetter">
                      </a>

在app.module.ts中声明新创建的pipe管道

import { AppComponent ,HighlihtText} from './app.component';

 declarations: [ AppComponent, HelloComponent,facilityFilterPipe,HighlihtText ],

对于 ALL 搜索问题重置更改 app.component.ts在方法 searchFacility(..)

的末尾添加以下行

if(search==''){
      this.searchFname="";
    }

并初始化变量searchFname如下

 searchFname:String;

对于突出显示 fList 元素，更改

<a (click)="selectedFacility(fList.facilityID)" [innerHtml]="fList.facilityName | getHtml : sLetter">

给

<a (click)="selectedFacility(fList.facilityID)">
                <strong  *ngIf="sLetter!=''" [innerHtml]="fList.facilityName | getHtml : sLetter"></strong>
                <strong *ngIf="sLetter==''">{{fList.facilityName}}</strong>
              </a>

并在 app.component.ts ngOnInit() 中初始化 sLetter 为

this.sLetter="";

StackBlitz 网址:https://stackblitz.com/edit/angular-ku9aaj

如果你有任何问题，请告诉我