/ngx-highlight-words

Angular component to highlight words within a larger body of text.

Primary LanguageTypeScriptMIT LicenseMIT

ngx-highlight-words

Build Status

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:

Basic Usage

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

License

MIT