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
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:
- Creating a highPipe.ts and copying the code above
- In File : app.module.ts,at @NgModule,ad declarations add HighlightPipe ( also,
import {HighlightPipe} from ‘./highPipe’; )
-
<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> )
Leave a Reply