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 = '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'
  13
  14   // tslint:disable-next-line:no-empty
  15   constructor () {}
  16
  17   transform (
  18       contentString: string = null,
  19       stringToHighlight: string = null,
  20       option = 'Single-And-StartsWith-Match',
  21       caseSensitive = false,
  22       highlightStyleName = 'search-highlight'
  23   ): SafeHtml {
  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': {
  33           regex = new RegExp('^' + stringToHighlight, caseFlag)
  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         }
  44       }
  45       const replaced = contentString.replace(
  46           regex,
  47           (match) => `<span class="${highlightStyleName}">${match}</span>`
  48       )
  49       return replaced
  50     } else {
  51       return contentString
  52     }
  53   }
  54 }