Как реализовать окно поиска, чтобы найти любой текст внутри любого <div>, используя Angular 5

Question

Это мое окно поиска.

и вот код HTML.В этом блоке кода я перебираю массив объектов, используя * ngFor .Так что <div> теги генерируются динамически.

`<div class="container-fluid" style="padding-left:15px !important; padding-right: 15px !important;">
<div class="card">
    <div class="card-header BlueTheme">Deal Comments Forms</div>
    <div class="card-header GreyTheme d-inline-flex" style="height:9%">
        <div class="searchControl inline-block-panel align-self-stretch form-inline" style="width: 56%">
            <p>Find Text:</p>
            <input type="search" name="searchTextBox" [(ngModel)]="searchText" style="border-radius: 5px;" />
            <div class="input-group-btn">
                <button (click)="onFirstSearchButtonClick()" class="btn btn-primary">First</button>
                <button (click)="onNextSearchButtonClick()" class="btn btn-primary">Next</button>
                <button (click)="onTakeMeFirstBlcokButtonClick()" class="btn btn-primary">Take me to first block</button>
                <button (click)="onTakeMePreviousBlcokButtonClick()" class="btn btn-primary">Take me to previous block</button>
                <button (click)="onTakeMeNextBlcokButtonClick()" class="btn btn-primary">Take me to next block</button>
                <button (click)="onTakeMeLastBlcokButtonClick()" class="btn btn-primary">Take me to last block</button>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="d-flex flex-wrap" style="margin-bottom: 20px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.19);"
             *ngFor="let commentLibrary of commentLibraries">
            <!-- ********************** <Comment Type> **************************-->
            <div class="d-inline-flex child1">
                <p><strong><u>Comment Type:</u></strong></p>
                <p class="ml-3">{{ commentLibrary.CommentType.CommentTypeName }}</p>
            </div>
            <!-- ********************** </Comment Type> **************************-->
            <!-- ************************* <Comment> *****************************-->
            <div class="flex-column child2">
                <p class="header"><u>Comment:</u></p>
                <p style="border:ridge; padding-left:10px;">{{ commentLibrary.Comment }}</p>
            </div>
            <!-- ************************ </Comment> *****************************-->
        </div>
    </div>
    <div class="card-footer">
        <button class="btn btn-primary">Close</button>
    </div>
</div>

`

Первое нажатие кнопки: -

• Теперь при нажатии кнопкиПервая кнопка, как искать текст в разделе комментариев и , выделять найденный текст и перемещать курсор к найденному тексту.

Кнопка NextButton: -

• При нажатии кнопки «Далее» найдите текст в текущей позиции курсора и выделите найденный текст и переместитекурсор на найденный текст. не перезапускать в начале формы

Перевести меня к первому блоку: -

• Переместить курсорк первому блоку комментариев.

Перейдите к предыдущему блоку: -

• Переместите курсор к предыдущему блоку комментариев относительнотекущая позиция курсора.

Перевести меня к следующему блоку: -

• Переместить курсор к следующему блоку комментариев относительно текущего курсорапозиция.

Отвести меня к последнему блоку: -

• Переместить курсор к последнему блоку комментария.

Я пробовал таким образом, но он не удовлетворяет моим требованиям и ведет себя ненормально (т. Е. Он также находит тексты и <tags>, а после очистки поля поиска очищает и мой блок комментариев.)

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'highlight'
})

export class HighlightSearch implements PipeTransform {

transform(value: any, args: any): any {
    var re = new RegExp(args, 'gi'); //'gi' for case insensitive and can use 'g' if you want the search to be case sensitive.
    return value.replace(re, "<mark>" + args + "</mark>");
    }
}