{"id":16700013,"url":"https://github.com/artiebits/ngx-highlight-words","last_synced_at":"2025-07-13T10:35:42.518Z","repository":{"id":35045029,"uuid":"200122436","full_name":"artiebits/ngx-highlight-words","owner":"artiebits","description":"Angular component to highlight words within a larger body of text.","archived":false,"fork":false,"pushed_at":"2023-02-04T02:19:30.000Z","size":2129,"stargazers_count":5,"open_issues_count":8,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-13T00:39:10.403Z","etag":null,"topics":["angular","angular-component","highlight","matches","ngx-highlight","occurrences","search","substring","text","words"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/artiebits.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-01T21:38:43.000Z","updated_at":"2023-07-13T22:12:56.000Z","dependencies_parsed_at":"2023-02-18T13:15:46.298Z","dependency_job_id":null,"html_url":"https://github.com/artiebits/ngx-highlight-words","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artiebits%2Fngx-highlight-words","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artiebits%2Fngx-highlight-words/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artiebits%2Fngx-highlight-words/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artiebits%2Fngx-highlight-words/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/artiebits","download_url":"https://codeload.github.com/artiebits/ngx-highlight-words/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221818145,"owners_count":16885696,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-component","highlight","matches","ngx-highlight","occurrences","search","substring","text","words"],"created_at":"2024-10-12T18:08:55.517Z","updated_at":"2024-10-28T10:43:23.939Z","avatar_url":"https://github.com/artiebits.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-highlight-words\n\n[![Build Status](https://travis-ci.org/artiebits/ngx-highlight-words.svg?branch=master)](https://travis-ci.org/artiebits/ngx-highlight-words)\n\nAngular component to highlight words within a text.\n\n## Usage\n\nJust provide it with an array of search terms and a body of text to highlight.\n\n```html\n\u003cngx-highlight-words\n  [textToHighlight]=\"'This is some text to highlight.'\"\n  [searchWords]=\"['this', 'to']\"\n  highlightClassName=\"your_highlight_class\"\n\u003e\n\u003c/ngx-highlight-words\u003e\n```\n\nAnd the `ngx-highlight-words` will mark all occurrences of search terms within the text:\n\n\u003cimg\n  src=\"https://dl.dropboxusercontent.com/s/0eljrgp0ylu6j93/basic-usage.png\"\n  alt=\"Basic Usage\"\n  width=\"209\"\n/\u003e\n\n## Props\n\n| Property           | Type                        | Required? | Description                                                                                                                                                                                                                                                  |\n| :----------------- | :-------------------------- | :-------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| textToHighlight    | String                      |     ✓     | Text to highlight matches in                                                                                                                                                                                                                                 |\n| searchWords        | Array\u003cString \u0026#124; RegExp\u003e |     ✓     | Array of search words. String search terms are automatically cast to RegExps unless `autoEscape` is true.                                                                                                                                                    |\n| highlightClassName | String or Object            |           | CSS class name applied to highlighted text or object mapping search term matches to class names.                                                                                                                                                             |\n| autoEscape         | Boolean                     |           | Escape characters in `searchWords` which are meaningful in regular expressions; defaults to `true`                                                                                                                                                           |\n| caseSensitive      | Boolean                     |           | Search should be case sensitive; defaults to `false`                                                                                                                                                                                                         |\n| 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. |\n| sanitize           | Function                    |           | Process each search word and text to highlight before comparing (eg remove accents); signature `(text: string): string`                                                                                                                                      |\n\n## Examples\n\n#### With regex in `searchWords`\n\n```html\n\u003cngx-highlight-words\n  [textToHighlight]=\"'The Federation\\'s gone; the Borg is everywhere!'\"\n  [searchWords]=\"['^the']\"\n  [autoEscape]=\"false\"\n\u003e\n\u003c/ngx-highlight-words\u003e\n```\n\n#### Case sensitive\n\n```html\n\u003cngx-highlight-words\n  [textToHighlight]=\"'The Federation\\'s gone; the Borg is everywhere!'\"\n  [searchWords]=\"['the']\"\n  [caseSensitive]=\"true\"\n\u003e\n\u003c/ngx-highlight-words\u003e\n```\n\n#### Sanitize\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { clean } from \"diacritic\";\n\n@Component({\n  selector: \"app-root\",\n  template: `\n    \u003cngx-highlight-words\n      [textToHighlight]=\"'Déjà vu'\"\n      [searchWords]=\"['deja']\"\n      [sanitize]=\"removeDiacritics\"\n    \u003e\n    \u003c/ngx-highlight-words\u003e\n  `,\n})\nexport class AppComponent {\n  removeDiacritics(text: string): string {\n    return clean(text);\n  }\n}\n```\n\n## Installation\n\n```shell script\nyarn add ngx-highlight-words\n```\n\n```shell script\nnpm i --save ngx-highlight-words\n```\n\nImport the `NgxHighlightWordsModule` in to your root AppModule.\n\n```typescript\nimport { NgxHighlightWordsModule } from \"ngx-highlight-words\";\n@NgModule({\n  imports: [NgxHighlightWordsModule],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n## Credits\n\n- [react-highlight-words](https://github.com/bvaughn/react-highlight-words) - React component to highlight words within a larger body of text.\n- [highlight-words-core](https://github.com/bvaughn/highlight-words-core) - Utilities to highlight words.\n\n## License\n\n[MIT](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartiebits%2Fngx-highlight-words","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartiebits%2Fngx-highlight-words","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartiebits%2Fngx-highlight-words/lists"}