client/src/app/header/highlight.pipe.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

import { PipeTransform, Pipe } from '@angular/core'
import { SafeHtml } from '@angular/platform-browser'

// Thanks https://gist.github.com/adamrecsko/0f28f474eca63e0279455476cc11eca7#gistcomment-2917369
@Pipe({ name: 'highlight' })
export class HighlightPipe implements PipeTransform {
  /* use this for single match search */
  static SINGLE_MATCH = 'Single-Match'
  /* use this for single match search with a restriction that target should start with search string */
  static SINGLE_AND_STARTS_WITH_MATCH = 'Single-And-StartsWith-Match'
  /* use this for global search */
  static MULTI_MATCH = 'Multi-Match'

  transform (
    contentString: string = null,
    stringToHighlight: string = null,
    option = 'Single-And-StartsWith-Match',
    caseSensitive = false,
    highlightStyleName = 'search-highlight'
  ): SafeHtml {
    if (stringToHighlight && contentString && option) {
      let regex: any = ''
      const caseFlag: string = !caseSensitive ? 'i' : ''

      switch (option) {
        case 'Single-Match': {
          regex = new RegExp(stringToHighlight, caseFlag)
          break
        }
        case 'Single-And-StartsWith-Match': {
          regex = new RegExp('^' + stringToHighlight, caseFlag)
          break
        }
        case 'Multi-Match': {
          regex = new RegExp(stringToHighlight, 'g' + caseFlag)
          break
        }
        default: {
          // default will be a global case-insensitive match
          regex = new RegExp(stringToHighlight, 'gi')
        }
      }

      const replaced = contentString.replace(
        regex,
        (match) => `<span class="${highlightStyleName}">${match}</span>`
      )

      return replaced
    } else {
      return contentString
    }
  }
}