Angular Typescript заменяет строку innerHTML на span

Question

Я ищу строку в innerHTML элемента div и хочу установить диапазон.Мой подход не работает без каких-либо ошибок.Что не так?

HTML

<div class="resultText" #txt></div>

JS

...
@ViewChild('txt') txt: ElementRef;
...
this.txt.nativeElement.innerHTML = text;
...
var query = 'test';
this.highlight(query);

highlight(query) {
      var c = this.txt.nativeElement.innerHTML;
      c.replace(new RegExp(query, "gi"), match => {
          console.log('query: ' + query);
          return '<span class="highlightText">' + match + '</span>';
      });
}

Answer 1

Вы не назначаете замененный текст обратно innerHTML

this.txt.nativeElement.innerHTML = c.replace(new RegExp(query, "gi"), match => {
      console.log('query: ' + query);
      return '<span class="highlightText">' + match + '</span>';
});