String 突出显示所有匹配词TypeScript

目前，我正在尝试在我的Angular项目中的文本中实现对搜索词的高亮显示。我将搜索操作作为一个单独的组件，我想创建一个管道，突出显示文本中搜索词的所有匹配项

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

 constructor(private _sanitizer: DomSanitizer) {
 }

 transform(text: any, search: string): SafeHtml {

 //takes care of any special characters
 if (search !== undefined && search !== null) {
   search = search.toString().replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 text += '';
 return this._sanitizer.bypassSecurityTrustHtml(search ? text.replace(new RegExp(search, 'gi'),
   '<span style="background-color: yellow">' + `${search}` + '</span>') : text);
 }
}

@Pipe（{name:'highlight'}）
导出类TextHighLightPipe实现PipeTransform{
构造函数（私有_消毒剂：domsanizer）{
}
转换（文本：任意，搜索：字符串）：安全HTML{
//处理任何特殊字符
if（搜索！==未定义和搜索！==空）{
search=search.toString（）.replace（/[.*+？^${}（）\[\]\\]/g，'\\$&'）；
}
文本+=”；
返回此。\u sanitizer.bypassSecurityTrustHtml（搜索？text.replace（新的RegExp（搜索，'gi'）），
'+`${search}`+''：文本）；
}
}

这段代码工作正常，但它会用搜索的单词替换所有匹配项，因此如果我有一个以大写开头的单词，当我用小写搜索它时，转换函数会将其替换为小写，这就是实际问题。。 例如：

要搜索的文本：此只是此代码的示例文本

搜索词：此

---

结果：这个只是这个代码的一个示例文本

我猜出来了。所以我只需要更改这段代码：

return this._sanitizer.bypassSecurityTrustHtml(search ? text.replace(new RegExp(search, 'gi'),
  '<span style="background-color: yellow">' + `${search}` + '</span>') : text);

返回此项。_sanitizer.bypassSecurityTrustHtml（搜索？text.replace（新的RegExp（搜索，'gi'），
'+`${search}`+''：文本）；

}

为此：

return this._sanitizer.bypassSecurityTrustHtml(search ? text.replace(new RegExp(`(${search})`, 'gi'),
  '<span style="background-color: yellow">' + `$1` + '</span>') : text);

返回此值。_sanitizer.bypassSecurityTrustHtml（search？text.replace（新的RegExp（`（${search}）`，'gi'），
''+'$1`+''：文本）；