javascript - 如何获取 'Highlight Keyword' 管道来显示不区分大小写的匹配项？

Question

我有一个搜索输入，它将突出显示匹配关键字的所有实例。它工作正常，唯一的问题是当我需要不区分大小写时它区分大小写。

这是一个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
  }
}

我尝试过做类似的事情:

const re = new RegExp(`\\\\?${args}` + `(?!([^<]+)?>)`, 'gi');

它“技术上”有效。但这个特定解决方案的问题是，第一个匹配字符 ( match[0] ) 在突出显示时始终会转换为第一个字符实例。

有什么想法如何替换硬编码的 match[0] 返回值，以便它在突出显示时不会更改原始字符？

Answer 1

使用该函数返回替换文本:

const replacedValue = args ? value.replace(re, (match) => `<mark>${match}</mark>`) : value;

修改了您的Stack Blitz示例。