Prism - поиск выделенного текста в Angular 6

Question

Я пытаюсь добавить функциональность ctrl-f внутри модального / всплывающего окна.В нем отображаются данные xml, что-то вроде этого:

<item>
    <title>abc</title>
    <note>def</note>
    <price>20</price>
</item>

, и я выделил теги (заголовок, примечание ... теги, например, синие), используя angular-prism .Теперь мне нужно добавить окно поиска, и когда пользователь что-то пишет в нем, оно должно выделить слово и прокрутить до его позиции.Мой первый приоритет - выделение искомого текста.Прокрутка до своей позиции не критична.Но я не могу выделить это, я думаю, это потому, что когда я покрасил теги, призма обернула все теги и данные между ними в теги span отдельно.(Я не уверен, что это проблема).Поэтому некоторые готовые библиотеки также не работают для выделения текста.Например, тег элемента находится внутри <span class="token tag"></span>

Вот как я отображаю свои данные в html-файле:

<input type="text" [(ngModel)]="searchedText">
<prism-block [code]="xmldata" [language]="'xml'" ></prism-block>

Если вы можете дать мне идею или предложение о том, как выделить искомый текстздесь было бы здорово.

Answer 1

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

import {PipeTransform, Pipe} from 'angular2/core';

@Pipe({ name: 'highlight' })
export class HighLightPipe implements PipeTransform {
  transform(text: string, [search]): string {
    return search ? text.replace(new RegExp(search, 'i'), `<span class="highlight">${search}</span>`) : text;
  }
}

/** Usage: 
* <input type="text" [(ngModel)]="filter">
* <div [innerHTML]="myAwesomeText  | highlight : filter"></div>
* 
*/