Angular Pipe to match and select words in a text

I needed two times the same pipe to match and select words in a text .

I maybe put later in a npm package, but until then , here it is

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
import { PipeTransform, Pipe } from '@angular/core';
 
@Pipe({ name: 'highlight' })
export class HighlightPipe implements PipeTransform {
  transform(text: string, search): string {
     // window.alert(text );
     //console.log(search );
    if (search && text) {
      let pattern = search.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
      pattern = pattern.split(' ').filter((t) => {
        return t.length > 0;
      }).join('|');
      const regex = new RegExp(pattern, 'gi');
 
      return text.replace(regex, (match) => `<b><i><strong>${match}</strong></i></b>`);
    } else {
      return text;
    }
  }
}

 

You can use by performing 3 steps:

  1.  Creating a highPipe.ts and copying the code above
  2. In File : app.module.ts , at @NgModule, ad declarations  add  HighlightPipe ( also,
    import {HighlightPipe} from ‘./highPipe’; )
  3. <span [innerHTML]=”name  | highlight: selectedText”></span>

Things to improve:

1. The regex should be a parameter ( with the default value seen below)

2. How to select the word should be a parameter also ( here is <b><i> )