javascript - 突出显示管道不会突出显示值的所有实例

Question

我有一个搜索输入，如果搜索输入与值的任何部分匹配，它会突出显示段落中的字符:

搜索输入:

<h4>Keyword Search</h4>
<mat-form-field appearance="outline" class="mat-form-field">
  <mat-label>Search</mat-label>
  <input matInput placeholder="Search Text" [(ngModel)]="searchTerm">
</mat-form-field>

//Area to search: 
 <p [innerHTML]="paragraphText | highlight: searchTerm"></p>

组件文件:

searchTerm: string;
paragraphText = "1. Local currency (Kwanza-AOA): up to AOA 50,000.- for residents and non-residents.<br xmlns="http://www.opentravel.org/OTA/2003/05/beta" />2. Foreign currencies:<br xmlns="http://www.opentravel.org/OTA/2003/05/beta" />a. Residents (older than 17 years): up to USD 15,000.- or equivalent;<br xmlns="http://www.opentravel.org/OTA/2003/05/beta" />b. Residents (younger than 18 years): up to USD 5,000.- or equivalent;<br xmlns="http://www.opentravel.org/OTA/2003/05/beta" />c. Non Residents (older than 17 years): up to USD 10,000.- or equivalent;<br xmlns="http://www.opentravel.org/OTA/2003/05/beta" />d. Non Residents (younger than 18 years): up to USD 3,000.- or equivalent. <br xmlns="http://www.opentravel.org/OTA/2003/05/beta" />Exempt: <br xmlns="http://www.opentravel.org/OTA/2003/05/beta" />- If holding a letter (certified by B.N.A./D.O.I.) from a company or entity which took care of payment of all expenses during stay in Angola: foreign currencies up to the amount imported.<br xmlns="http://www.opentravel.org/OTA/2003/05/beta" />- Amounts left with receipts of bills paid or money exchange vouchers. "

突出显示管道:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'highlight'
})
export class HighlightPipe implements PipeTransform {

  transform(value: string, searchTerm: string, index= -1 ): any {
    if (searchTerm && value) {
      value = String(value);
      console.log(value);
      const startIndex = value.toLowerCase().indexOf(searchTerm.toLowerCase(),index);
      if (startIndex != -1) {
          const endLength = searchTerm.length;
          const matchingString = value.substr(startIndex, endLength);
          return value.substring(0,startIndex)+"<mark>" + matchingString + "</mark>"+value.substring(startIndex+endLength);
        }

    }
    return value;
  }

}

当前行为在搜索字段中输入字母(例如:“c”)时，并非所有“c”都会突出显示。我注意到一种模式，即内联 html 标记(在 paragraphText 属性中)之后的任何内容都不会被拾取。

预期行为段落中与搜索字段中的字符串匹配的所有字符都应突出显示。

为了确保所有值都突出显示，我在突出显示管道中做错了什么？

Answer 1

我创建了以下stackblitz显示如何使用突出显示管道的示例

管道:

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

  transform(value: any, args: string): any {
    if (!args) {
      return value;
    }
    const specials = [
      // order matters for these
      "-"
      , "["
      , "]"
      // order doesn't matter for any of these
      , "/"
      , "{"
      , "}"
      , "("
      , ")"
      , "*"
      , "+"
      , "?"
      , "."
      , "\\"
      , "^"
      , "$"
      , "|"
    ];

    const rgxEscaper = RegExp('[' + specials.join('\\') + ']', 'g');

    args = args.replace(rgxEscaper, "\\$&");

    // Match in a case insensitive maneer
    const re = new RegExp(`\\\\?${args}` + `(?!([^<]+)?>)`, 'g');
    const match = value.match(re);

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

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

组件:

@Component({ 
  selector: 'my-app',
  styleUrls: ['./app.component.css'],
  template: `
    <label for="search-term">Search</label>
    <input placeholder="Enter term" (input)="updateSearch($event)" id="search-term">
    <div [innerHTML]="results | highlight: searchTerm"></div>
  `,
})
export class AppComponent {
  results: string;
  searchTerm: string;
  constructor() {
    this.results =  '"1. Local currency (Kwanza-AOA): up to AOA 50,000.- for residents and non-residents.<br xmlns="http://www.opentravel.org/OTA/2003/05/beta" />2. Foreign currencies:<br xmlns="http://www.opentravel.org/OTA/2003/05/beta" />a. Residents (older than 17 years): up to USD 15,000.- or equivalent;<br xmlns="http://www.opentravel.org/OTA/2003/05/beta" />b. Residents (younger than 18 years): up to USD 5,000.- or equivalent;<br xmlns="http://www.opentravel.org/OTA/2003/05/beta" />c. Non Residents (older than 17 years): up to USD 10,000.- or equivalent;<br xmlns="http://www.opentravel.org/OTA/2003/05/beta" />d. Non Residents (younger than 18 years): up to USD 3,000.- or equivalent. <br xmlns="http://www.opentravel.org/OTA/2003/05/beta" />Exempt: <br xmlns="http://www.opentravel.org/OTA/2003/05/beta" />- If holding a letter (certified by B.N.A./D.O.I.) from a company or entity which took care of payment of all expenses during stay in Angola: foreign currencies up to the amount imported.<br xmlns="http://www.opentravel.org/OTA/2003/05/beta" />- Amounts left with receipts of bills paid or money exchange vouchers. "'
  }
    updateSearch(e) {
    this.searchTerm = e.target.value
  }
}