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:

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!