client/src/app/shared/angular/highlight.pipe.ts

   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 */
   8   static SINGLE_MATCH: string = "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: string = "Single-And-StartsWith-Match"
  11   /* use this for global search */
  12   static MULTI_MATCH: string = "Multi-Match"
  13
  14   constructor() {}
  15   transform(
  16       contentString: string = null,
  17       stringToHighlight: string = null,
  18       option: string = "Single-And-StartsWith-Match",
  19       caseSensitive: boolean = false,
  20       highlightStyleName: string = "search-highlight"
  21   ): SafeHtml {
  22       if (stringToHighlight && contentString && option) {
  23           let regex: any = ""
  24           let caseFlag: string = !caseSensitive ? "i" : ""
  25           switch (option) {
  26               case "Single-Match": {
  27                   regex = new RegExp(stringToHighlight, caseFlag)
  28                   break
  29               }
  30               case "Single-And-StartsWith-Match": {
  31                   regex = new RegExp("^" + stringToHighlight, caseFlag)
  32                   break
  33               }
  34               case "Multi-Match": {
  35                   regex = new RegExp(stringToHighlight, "g" + caseFlag)
  36                   break
  37               }
  38               default: {
  39                   // default will be a global case-insensitive match
  40                   regex = new RegExp(stringToHighlight, "gi")
  41               }
  42           }
  43           const replaced = contentString.replace(
  44               regex,
  45               (match) => `<span class="${highlightStyleName}">${match}</span>`
  46           )
  47           return replaced
  48       } else {
  49           return contentString
  50       }
  51   }
  52 }