ngx-highlight-words

Angular component to highlight words within a text.

Usage

Just provide it with an array of search terms and a body of text to highlight.

<ngx-highlight-words
  [textToHighlight]="'This is some text to highlight.'"
  [searchWords]="['this', 'to']"
  highlightClassName="your_highlight_class"
>
</ngx-highlight-words>

And the ngx-highlight-words will mark all occurrences of search terms within the text:

Props

Property	Type	Required?	Description
textToHighlight	String	✓	Text to highlight matches in
searchWords	Array<String | RegExp>	✓	Array of search words. String search terms are automatically cast to RegExps unless autoEscape is true.
highlightClassName	String or Object		CSS class name applied to highlighted text or object mapping search term matches to class names.
autoEscape	Boolean		Escape characters in searchWords which are meaningful in regular expressions; defaults to true
caseSensitive	Boolean		Search should be case sensitive; defaults to false
findChunks	Function		Use a custom function to search for matching chunks. This makes it possible to use arbitrary logic when looking for matches. See the default findChunks function in highlight-words-core for signature.
sanitize	Function		Process each search word and text to highlight before comparing (eg remove accents); signature (text: string): string

Examples

With regex in searchWords

<ngx-highlight-words
  [textToHighlight]="'The Federation\'s gone; the Borg is everywhere!'"
  [searchWords]="['^the']"
  [autoEscape]="false"
>
</ngx-highlight-words>

Case sensitive

<ngx-highlight-words
  [textToHighlight]="'The Federation\'s gone; the Borg is everywhere!'"
  [searchWords]="['the']"
  [caseSensitive]="true"
>
</ngx-highlight-words>

Sanitize

import { Component } from "@angular/core";
import { clean } from "diacritic";

@Component({
  selector: "app-root",
  template: `
    <ngx-highlight-words
      [textToHighlight]="'Déjà vu'"
      [searchWords]="['deja']"
      [sanitize]="removeDiacritics"
    >
    </ngx-highlight-words>
  `,
})
export class AppComponent {
  removeDiacritics(text: string): string {
    return clean(text);
  }
}

Installation

yarn add ngx-highlight-words

npm i --save ngx-highlight-words

Import the NgxHighlightWordsModule in to your root AppModule.

import { NgxHighlightWordsModule } from "ngx-highlight-words";
@NgModule({
  imports: [NgxHighlightWordsModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Credits

• react-highlight-words - React component to highlight words within a larger body of text.
• highlight-words-core - Utilities to highlight words.

License

MIT