client/src/app/shared/angular/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

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: string = "Single-Match"
  /* use this for single match search with a restriction that target should start with search string */
  static SINGLE_AND_STARTS_WITH_MATCH: string = "Single-And-StartsWith-Match"
  /* use this for global search */
  static MULTI_MATCH: string = "Multi-Match"

  constructor() {}
  transform(
      contentString: string = null,
      stringToHighlight: string = null,
      option: string = "Single-And-StartsWith-Match",
      caseSensitive: boolean = false,
      highlightStyleName: string = "search-highlight"
  ): SafeHtml {
      if (stringToHighlight && contentString && option) {
          let regex: any = ""
          let 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
      }
  }
}