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标记（在sectionText属性中）之后的任何内容都不会被拾取。

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

在高亮显示管道中我要怎么做才能确保所有值都被突出显示？？

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
  }
}

Answer 2

我正在使用regexp替换所有出现的搜索字词

export class HighlightPipe implements PipeTransform {
   transform(text: string, search: string): string {
     if (search && text) {
       let pattern = search.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
       pattern = pattern.split(' ').filter((t) => {
         return t.length > 0;
       }).join('|');
       const regex = new RegExp(pattern, 'gi');
       return text.replace(regex, (match) => `<mark>${match}</mark>`);
     } else {
       return text;
     }
   }
}

编辑：嗯，考虑到您正在html文档中搜索，而不仅仅是纯文本，对吗？在管道中进行实际搜索之前，请考虑转义文本中的html标签。就像将<变成< ...我将对其进行测试并发布该功能的更新，但目前在移动设备上。

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

2 个答案: