Question

我正在尝试在模式/弹出窗口中添加ctrl-f功能。我在其中显示了一个xml数据，如下所示：

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

，然后我使用angular-prism突出显示了标签（例如标题，注释...标签为蓝色）。现在，我需要添加搜索框，当用户在其中添加内容时，应突出显示该词并滚动到其位置。我的首要任务是突出显示搜索到的文本。滚动到其位置并不重要。但是我不能强调它，我认为是因为当我给标签着色时，prism将它们之间的所有标签和数据分别包装为span标签。（我不确定这是问题所在）。因此，某些现成的库也不能用于突出显示文本。例如item标签位于<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>
* 
*/

棱镜-Angular 6中突出显示的搜索文字

1 个答案: