Создание ключевого слова подсветки труб с помощью регулярных выражений и угловых

Question

Мне нужно выделить ключевое слово в пункте поиска.

Итак, я создал канал, который оборачивает ключевое слово 1004 * в span и добавляет класс .highlight.

. Проблема в том, что мой абзац содержит ссылки и специальные символы дляпример: "href=\"keyword.co.uk/\".Поэтому, если канал находит ключевое слово , которое я ищу внутри элемента href, он также заменит его.

Подскажите, пожалуйста, как избежать замены ссылок и специальных символов?

let data = [{
    "question": "Lorem ipsum dolor sit amet",
    "answer": ["Lorem ipsum <a href=\"https://www.keyword.co.uk/\" data-rt-link-type=\"external\" target=\"_blank\">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."]
}]

import {DomSanitizer, SafeHtml} from '@angular/platform-browser';

@Pipe({name: 'highlightKeyword'})
export class  HighlightKeyword implements PipeTransform {

    constructor(private sanitizer: DomSanitizer) {}

    transform(text: string, search): SafeHtml {
        if (search && text) {
            let pattern = search.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
            console.log(pattern)
            pattern = pattern.split(' ').filter((t) => {
                return t.length > 0;
            }).join('|');
            const regex = new RegExp(pattern, 'gi'); console.log(text)
            return this.trustHtml(
                text.replace(regex, (match) => `<span class="highlight">${match}</span>`)
            );
        } else {
            return this.trustHtml(text);
        }
    }


    trustHtml(htmlSnip: any) {
        return this.sanitizer.bypassSecurityTrustHtml(htmlSnip);
    }
}

<input [formControl]="searchQuery" [placeholder]="placeholderText">
<div *ngFor="let article of Articles">
  <mat-card>
    <mat-card-title [innerHTML]="data.question | highlightKeyword: searchQuery">
    </mat-card-title>
    <mat-card-content>
      <p *ngFor="let paragraph of data.answer"
        [innerHTML]="paragraph | highlightKeyword: searchQuery">
      </p>
    </mat-card-content>
  </mat-card>
</div>