如何匹配搜索文本中的字符串突出显示angular4中html中的文本

Question

如何匹配搜索文本和对象数组中的字符串，并在angular4中突出显示HTML中的文本

 I am using pipe for this.
 `@Pipe({ name: 'researchfilter' })


export class researchFilterPipe implements PipeTransform {
searchtext: any;

constructor(private searchTermUpdataionService:searchTermUpdataionService)
{
this.searchTermUpdataionService.getupdatesearchfilter().subscribe((Object: 
any) => {

  this.searchtext = Object.searchFilter.searchTerm

 });
}
transform(items: any): String[] {
if (!this.searchtext) {
  return items;
}
console.log("items",items);
if(items!= null && this.searchtext !=  null){
let newitem = items.toLowerCase()
var pattern = this.searchtext.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, 
"\\$&");
pattern = pattern.split(' ').filter((t) => {
  return t.length > 0;
}).join('|');
var regex = new RegExp(pattern, 'gi');
return this.searchtext ? newitem.replace(pattern, (match) => `<span 
class="highlight">${match}</span>`) : newitem;
}`

这是我的HTML

  <p  class="mdl-color-text--800" style="font-weight: bold ;color: #212121" 
  [innerHTML]="sources?(sources[0].name | researchfilter : 
  searchFilter):''"></p>

我在项目中获取名称，我正在搜索字符串   this.search文本，但无法突出显示HTML中的字符串