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!

Discussion (3)

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 Author

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/