Search and Highlight Text feature using Angular
Tags: angular, javascript, webdev
Published: 2022-01-20 15:00:07

Cover Photo by <a href="https://unsplash.com/@aaronburden?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Aaron Burden</a> on <a href="https://unsplash.com/s/photos/search-and-highlight?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/895crge1ahjgd4dpbdse.png)

For the input lets bind that to ngModel which we will use as search criteria and a div having sample text as an innerHtml
```html
<div class="search-input">
 <label for="">Search here: </label> <input [(ngModel)]="searchText" type="search">
</div>

<div class="text-contaniner" [innerHtml]="text"  >
 </div>
```
```javascript
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.

```html
ng g pipe highlighter
```
We can put the below code in the pipe if we want to have border limit on the search
```javascript
 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
```javascript
 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
```javascript
 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.
![2inputs screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rj2ku05jo40yro3m99vg.png)

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.
```html
<div class="text-contaniner" [innerHtml]="text | highlighter:searchText:'full'"  >
```
Full code can be found at [GitHub](https://github.com/nikhild64/highlight-text).
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/](https://nikhild64.github.io/highlight-text/):
![working example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5s1ngbixlxevzna0z7e.png)
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](https://twitter.com/nikhild64) or comment below.
Till next time Happy Learning!
{% stackblitz highlighttext-angular view=preview %}