Cover Photo by Aaron Burden on Unsplash
Hi all, in today's post we will discuss how we can make an app search and highlight features in our angular app. So the scenario can be we have a long text and we have to give the user functionality to search in a text box and related text to highlight on the paragraph below.
For this we need to have a simple setup, a search box, and a text in which we want to search(here I will take some dummy text) like as below:
For the input lets bind that to ngModel which we will use as search criteria and a div having sample text as an innerHtml
<div class="search-input">
<label for="">Search here: </label> <input [(ngModel)]="searchText" type="search">
</div>
<div class="text-contaniner" [innerHtml]="text" >
</div>
export class AppComponent {
searchText='';
text=`somedummy text here`
}
For functionality of highlighting we will need to create an Angular pipe which I am naming as a highlighter, we can create a pipe using Angular CLI using the below command.
ng g pipe highlighter
We can put the below code in the pipe if we want to have border limit on the search
transform(value: any, args: any): unknown {
if(!args) return value;
const re = new RegExp("\\b("+args+"\\b)", 'igm');
value= value.replace(re, '<span class="highlighted-text">$1</span>');
return value;
}
and if we want to have text to searched irrespective of the word boundary , we can use below
transform(value: any, args: any): unknown {
if(!args) return value;
const re = new RegExp("\\b("+args+"\\b)", 'igm');
value= value.replace(re, '<span class="highlighted-text">$&</span>');
return value;
}
Lets add 1 more input where we utilize this partial highlighting also and combine these 2 pipes into 1 pipe based upon purpose, which makes our pipe code as
transform(value: any, args: any,type:string): unknown {
if(!args) return value;
if(type==='full'){
const re = new RegExp("\\b("+args+"\\b)", 'igm');
value= value.replace(re, '<span class="highlighted-text">$1</span>');
}
else{
const re = new RegExp(args, 'igm');
value= value.replace(re, '<span class="highlighted-text">$&</span>');
}
return value;
}
And after adding 2 inputs our UI will look like this.
Now lets integrate our code with pipe and test it out. In HTML we can add the pipe to text we added with the input as input from user and with search criteria.
<div class="text-contaniner" [innerHtml]="text | highlighter:searchText:'full'" >
Full code can be found at GitHub.
Now let us test it out, we will be able to see the text is getting highlighted in both ways and should be as below, you can also try it out at https://nikhild64.github.io/highlight-text/:
Hope you liked it and if you have some other ways you might have used it, please comment below.
If you liked it please share it with your friends or if any suggestions reach me out on Twitter or comment below.
Till next time Happy Learning!
Top comments (7)
I challenge you to think of a way to do that without using innerHtml 😃
Intresting, will surely try to think on it
Future native solution w3.org/TR/css-highlight-api-1/
Thanks , it was usefull but if we have a full web application that connected to the databace ,in this cas how can i add a highlight in the search box to indicate the words that already available in the database , and also for this application i added multiple search boxes and want to activate the highlight for all of them , so please explain how can i do it "Angular 11.3"
I spent a lot of time scratching my head over why this code didn't work for me and turns out I just had to change with
there is a bug when you search a value which contains in html tags. such as search "p", then it will be shown "<p>Lorem"
its not working if the buttons and the other tags are there, dispalying it as ok on webpagehow do we rendeer it as html