1 import { PipeTransform, Pipe } from '@angular/core'
2 import { SafeHtml } from '@angular/platform-browser'
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 */
8 static SINGLE_MATCH = 'Single-Match'
9 /* use this for single match search with a restriction that target should start with search string */
10 static SINGLE_AND_STARTS_WITH_MATCH = 'Single-And-StartsWith-Match'
11 /* use this for global search */
12 static MULTI_MATCH = 'Multi-Match'
14 // tslint:disable-next-line:no-empty
18 contentString: string = null,
19 stringToHighlight: string = null,
20 option = 'Single-And-StartsWith-Match',
21 caseSensitive = false,
22 highlightStyleName = 'search-highlight'
24 if (stringToHighlight && contentString && option) {
26 const caseFlag: string = !caseSensitive ? 'i' : ''
28 case 'Single-Match': {
29 regex = new RegExp(stringToHighlight, caseFlag)
32 case 'Single-And-StartsWith-Match': {
33 regex = new RegExp('^' + stringToHighlight, caseFlag)
37 regex = new RegExp(stringToHighlight, 'g' + caseFlag)
41 // default will be a global case-insensitive match
42 regex = new RegExp(stringToHighlight, 'gi')
45 const replaced = contentString.replace(
47 (match) => `<span class="${highlightStyleName}">${match}</span>`