aboutsummaryrefslogblamecommitdiffhomepage
path: root/client/src/app/header/highlight.pipe.ts
blob: 50ee5c1bd372d9894baae059900ab334ec609f2d (plain) (tree)
1
2
3
4
5
6
7
8
9





                                                                                                 
                                      
                                                                                                       
                                                                     
                                  
                                    
 
             



                                           
               

                                                        
 




                                                         
                                                               








                                                               
       
 
                                             
                                                                        
       
 


                          
   
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
    }
  }
}