DEV Community

Cover image for Search and Highlight Text feature using Angular
Nikhil Dhawan for This is Angular

Posted on

Search and Highlight Text feature using Angular

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:
Start screen

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>


Enter fullscreen mode Exit fullscreen mode


export class AppComponent {
  searchText='';
  text=`somedummy text here`
}


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

And after adding 2 inputs our UI will look like this.
2inputs screen

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'"  >


Enter fullscreen mode Exit fullscreen mode

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/:
working example
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)

Collapse
 
layzee profile image
Lars Gyrup Brink Nielsen

I challenge you to think of a way to do that without using innerHtml πŸ˜ƒ

Collapse
 
nikhildhawan profile image
Nikhil Dhawan

Intresting, will surely try to think on it

Collapse
 
layzee profile image
Lars Gyrup Brink Nielsen

Future native solution w3.org/TR/css-highlight-api-1/

Collapse
 
kazi9900 profile image
kazi9900

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"

Collapse
 
muhidabid profile image
Muhid Abid

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

Collapse
 
__6abbbeb9ff274a1103f6e profile image
Richie • Edited

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"

Collapse
 
sai_thonukunoori_833ca8ca profile image
Sai Thonukunoori • Edited

its not working if the buttons and the other tags are there, dispalying it as ok on webpagehow do we rendeer it as html