如何使用管道突出显示angular6中的搜索文本？

Question

我想用角形构建一个搜索框，该搜索框将返回项目数组，并在结果数组中突出显示searcchedTerm。

例如：在Chrome中，如果您正在搜索任何文本，则该文本会以浅黄色背景突出显示。与此类似。

我创建了两个管道，一个用于过滤结果，另一个用于在搜索结果中突出显示一词。 但是我遇到错误replace is not a function。

而且，两个管道可以合并为一个吗？

highlight.pipe.ts

transform(list: any, searchText: string): any[] {
    if (!list) { return []; }
    if (!searchText) { return list; }

    const re = new RegExp(searchText, 'gi');
    const value = list.replace(re, "<span class='yellow'>" + searchText + "</span>" );
    return list;
}

使用模板中的管道

<div class="card" *ngFor="let item of list | search: searchedTerm | highlight: searchedTerm">

Answer 1

我
迭代list过滤的searchedTerm。 将突出显示的html放入innerHTML。

// html
<div class="card" *ngFor="let item of list | search: searchedTerm">
  <span [innerHTML]="item.name | highlight: searchedTerm"></span>
</div>

II

// HighlightPipe
const re = new RegExp(searchText, 'gi');
return item.replace(re, `<span class='yellow'>${searchText}</span>` );

III

使用已弃用（移至全局样式）deep，因为默认情况下组件已模拟ViewEncapsulation

// css
::ng-deep .yellow{
  background: yellow;
}

Answer 2

1-在highlight.pipe.ts

中

transform(list: any, searchText: string): any[] {
console.log('lists', list);
console.log('searchText', searchText);

if (!list) { return []; }
//to remove highlighted tags before any processing
list = list.map(function (item) {
  item.name = item.name ? String(item.name).replace(/<[^>]+>/gm, '') : '';
  return item;
})
if (!searchText) { return list; }

const re = new RegExp(searchText, 'gi');
const value = list
  .map(function (item) {
    //this will match the values and add the highlight tag for it
    item.name = item.name.replace(re, "<span class='yellow'>" + searchText + "</span>");
    return item
  });
return value;

}

2-将.yellow样式移至style.css以匹配注入的html

3-在app.component.html

中

<div class="card" *ngFor="let item of list | search: searchedTerm | highlight: searchedTerm">
 <span [innerHTML]="item.name"></span>
</div>

如果您希望项目消失，那么仅在突出显示管道的情况下使用搜索管道，那么仅突出显示管道就足够了

更新的Stackblitz的链接：https://stackblitz.com/edit/angular-searchpipe?file=src%2Fapp%2Fapp.component.html