Hightlight text in search result using pipe angular 2+

Code:

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'highlightSearch'
})
export class HighlightSearchPipe implements PipeTransform {
  transform(value: any, args: any): any {
    if (!args) {return value; }
    const re = new RegExp(args, 'gi'); // 'gi' for case insensitive and can use 'g' if you want the search to be case sensitive.
    return value.replace(new RegExp(args, 'gi'), '<span font-bold>$&</span>'/*re, '<span font-bold>' + args + '</span>'*/);
  }
}


How to use:

{{someStringVar | highlightSearch: textToHighlight | safeHtml}}

Comments

Popular posts from this blog

MATLAB code for Circular Convolution using Matrix method

Positive number pipe in angular 2+