Giter VIP home page Giter VIP logo

ngx-highlight-words's Introduction

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

ngx-highlight-words's People

Contributors

artiebits avatar dependabot-preview[bot] avatar dependabot[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

ngx-highlight-words's Issues

Getting error when installing

Describe the bug
getting npm ERR! when installing the lib.
tried using the --legacy-peer-deps flag. it still results in the same error.

To Reproduce

  1. create new angular project with angular cli (v13.0.1).
  2. run npm install ngx-highlight-words.

Expected behavior
the lib should install without errors - meaning it should be compatible with angular 13.

Screenshots
image

Desktop OS:

  • mac big Sur

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.