Выделение всех совпадающих слов TypeScript

Question

В настоящее время я пытаюсь реализовать выделение искомого слова в тексте в моем 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);
 }
}

Этот код работает нормально, но заменяет все совпадения. с искомым словом, поэтому в случае, если у меня есть слово, которое начинается с верхнего регистра, при поиске его в нижнем регистре, функция преобразования заменит его на строчное, что является актуальной проблемой. Например:

Текст для поиска: Этот является просто примером текста этого кода

Поисковое слово: этого

Результат: этот является просто примером текста этого кода

Answer 1

Я понял это. Так что мне нужно было только изменить этот кусок кода:

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

}

На это:

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