https://github.com/artiebits/ngx-highlight-words
Angular component to highlight words within a larger body of text.
https://github.com/artiebits/ngx-highlight-words
angular angular-component highlight matches ngx-highlight occurrences search substring text words
Last synced: 2 months ago
JSON representation
Angular component to highlight words within a larger body of text.
- Host: GitHub
- URL: https://github.com/artiebits/ngx-highlight-words
- Owner: artiebits
- License: mit
- Created: 2019-08-01T21:38:43.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-04T02:19:30.000Z (over 2 years ago)
- Last Synced: 2024-10-13T00:39:10.403Z (8 months ago)
- Topics: angular, angular-component, highlight, matches, ngx-highlight, occurrences, search, substring, text, words
- Language: TypeScript
- Homepage:
- Size: 2.03 MB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# ngx-highlight-words
[](https://travis-ci.org/artiebits/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.
```html
```
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 | ✓ | 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](https://github.com/bvaughn/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`
```html
```
#### Case sensitive
```html
```
#### Sanitize
```typescript
import { Component } from "@angular/core";
import { clean } from "diacritic";
@Component({
selector: "app-root",
template: `
`,
})
export class AppComponent {
removeDiacritics(text: string): string {
return clean(text);
}
}
```
## Installation
```shell script
yarn add ngx-highlight-words
```
```shell script
npm i --save ngx-highlight-words
```
Import the `NgxHighlightWordsModule` in to your root AppModule.
```typescript
import { NgxHighlightWordsModule } from "ngx-highlight-words";
@NgModule({
imports: [NgxHighlightWordsModule],
bootstrap: [AppComponent],
})
export class AppModule {}
```
## Credits
- [react-highlight-words](https://github.com/bvaughn/react-highlight-words) - React component to highlight words within a larger body of text.
- [highlight-words-core](https://github.com/bvaughn/highlight-words-core) - Utilities to highlight words.
## License
[MIT](/LICENSE)