]>
Commit | Line | Data |
---|---|---|
f409f0c3 RK |
1 | import { PipeTransform, Pipe } from '@angular/core' |
2 | import { SafeHtml } from '@angular/platform-browser' | |
3 | ||
4 | // Thanks https://gist.github.com/adamrecsko/0f28f474eca63e0279455476cc11eca7#gistcomment-2917369 | |
5 | @Pipe({ name: 'highlight' }) | |
6 | export class HighlightPipe implements PipeTransform { | |
7 | /* use this for single match search */ | |
9b8a7aa8 | 8 | static SINGLE_MATCH = 'Single-Match' |
f409f0c3 | 9 | /* use this for single match search with a restriction that target should start with search string */ |
9b8a7aa8 | 10 | static SINGLE_AND_STARTS_WITH_MATCH = 'Single-And-StartsWith-Match' |
f409f0c3 | 11 | /* use this for global search */ |
9b8a7aa8 | 12 | static MULTI_MATCH = 'Multi-Match' |
f409f0c3 | 13 | |
9b8a7aa8 RK |
14 | // tslint:disable-next-line:no-empty |
15 | constructor () {} | |
16 | ||
17 | transform ( | |
f409f0c3 RK |
18 | contentString: string = null, |
19 | stringToHighlight: string = null, | |
9b8a7aa8 RK |
20 | option = 'Single-And-StartsWith-Match', |
21 | caseSensitive = false, | |
22 | highlightStyleName = 'search-highlight' | |
f409f0c3 | 23 | ): SafeHtml { |
9b8a7aa8 RK |
24 | if (stringToHighlight && contentString && option) { |
25 | let regex: any = '' | |
26 | const caseFlag: string = !caseSensitive ? 'i' : '' | |
27 | switch (option) { | |
28 | case 'Single-Match': { | |
29 | regex = new RegExp(stringToHighlight, caseFlag) | |
30 | break | |
31 | } | |
32 | case 'Single-And-StartsWith-Match': { | |
8a979d73 | 33 | regex = new RegExp('^' + stringToHighlight, caseFlag) |
9b8a7aa8 RK |
34 | break |
35 | } | |
36 | case 'Multi-Match': { | |
37 | regex = new RegExp(stringToHighlight, 'g' + caseFlag) | |
38 | break | |
39 | } | |
40 | default: { | |
41 | // default will be a global case-insensitive match | |
42 | regex = new RegExp(stringToHighlight, 'gi') | |
43 | } | |
f409f0c3 | 44 | } |
9b8a7aa8 RK |
45 | const replaced = contentString.replace( |
46 | regex, | |
47 | (match) => `<span class="${highlightStyleName}">${match}</span>` | |
48 | ) | |
49 | return replaced | |
50 | } else { | |
51 | return contentString | |
52 | } | |
f409f0c3 RK |
53 | } |
54 | } |