https://github.com/dailybothq/search-text-highlight
This tool allow find a string or substring from a text and highlight it with html wrapper with unicode support.
https://github.com/dailybothq/search-text-highlight
highlight html-wrapper nodejs search text unicode-support
Last synced: 3 months ago
JSON representation
This tool allow find a string or substring from a text and highlight it with html wrapper with unicode support.
- Host: GitHub
- URL: https://github.com/dailybothq/search-text-highlight
- Owner: DailyBotHQ
- License: mit
- Created: 2019-09-10T14:49:04.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-01-28T20:05:10.000Z (3 months ago)
- Last Synced: 2025-01-28T21:20:20.064Z (3 months ago)
- Topics: highlight, html-wrapper, nodejs, search, text, unicode-support
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/search-text-highlight
- Size: 778 KB
- Stars: 13
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Search Text Highlight
This tool allow find a string or substring from a text and highlight it with html wrapper and unicode support.
---
[](https://github.com/DailyBotHQ/search-text-highlight/blob/main/LICENSE)
[](https://github.com/DailyBotHQ/search-text-highlight)
[](https://www.npmjs.com/package/search-text-highlight)
## Installation
```
npm install search-text-highlight --save
or
yarn add search-text-highlight
```
## Usage
Import
```javascript
// ES6 import
→ import searchTextHL from 'search-text-highlight'
or
// CommonJS require
→ const searchTextHL = require('search-text-highlight')
```
Basic usage
```javascript
→ const text = 'This is a simple but an amazing tool for text highlight 😎.'
→ const query = 'amazing'
→ searchTextHL.highlight(text, query)
This is a simple but an amazing tool for text highlight 😎.
```
Highlight multiple match substrings.
```javascript
→ const text = 'This is a simple but an amazing tool for text highlight 😎.'
→ const query = 'a'
→ searchTextHL.highlight(text, query)
This is a simple but an amazing tool for text highlight 😎.
```
Customize html tag; the default is a `span`.
```javascript
→ const text = 'This is a simple but an amazing tool for text highlight 😎.'
→ const query = 'amazing'
→ const options = { htmlTag: 'label' }
→ searchTextHL.highlight(text, query, options)
This is a simple but an amazing tool for text highlight 😎.
```
Customize highlight class.
```javascript
→ const text = 'This is a simple but an amazing tool for text highlight 😎.'
→ const query = 'amazing'
→ const options = { htmlTag: 'label', hlClass: 'custom-class' }
→ searchTextHL.highlight(text, query, options)
This is a simple but an amazing tool for text highlight 😎.
```
Highlight only the first query match.
```javascript
→ const text = 'This is a simple but an amazing tool for text highlight 😎.'
→ const query = 'a'
→ const options = { htmlTag: 'label', hlClass: 'custom-class', matchAll: false }
→ searchTextHL.highlight(text, query, options)
This is a simple but an amazing tool for text highlight 😎.
```
Highlight with a case sensitive query
```javascript
→ const text = 'This is a simple but an amazing tool for text highlight 😎.'
→ const query = 'AMAZING'
→ const options = { caseSensitive: true }
→ searchTextHL.highlight(text, query, options)
This is a simple but an amazing tool for text highlight 😎.
```
## All value params for `highlight` method
| Name | Type | Default | Description |
| :------ | :----- | :------ | :------------------------------------ |
| text | string | '' | base message |
| query | string | '' | substring for highlight in message |
| options | object | {} | parameterizable options for highlight |
### All properties of highlight `options`
| Name | Type | Default | Description |
| :------------ | :------ | :--------------- | :------------------------------------------------------------------------------------- |
| htmlTag | string | 'span' | custom highlight HTML Tag wrapper |
| hlClass | string | 'text-highlight' | custom highlight class |
| matchAll | boolean | true | match all instances of the query in text message, not just one |
| caseSensitive | boolean | false | match query text distinguish between uppercase (capital) and lowercase (small) letters |
### Css Styles
Use these css styles in your html code to highlight the found text.
```css
:root {
--light-blue-color: #b1d9ff;
--dark-blue-color: #508fca;
}
.text-highlight {
background: var(--light-blue-color);
border-radius: 2px;
padding: 0 2px;
border: 1px solid var(--dark-blue-color);
}
```
## :electric_plug: Powered by [DailyBot](https://www.dailybot.com?utm_source=dailybotopensource&utm_medium=search-text-highlight)
DailyBot is an [AI Assistant](https://www.dailybot.com/product/ai) powered by ChatGPT that takes chat and collaboration to the next level helping to automate: daily standups, team check-ins, surveys, kudos, virtual watercooler, 1:1 intros, motivation tracking, chatops and more. [Learn more](https://www.dailybot.com?utm_source=dailybotopensource&utm_medium=search-text-highlight).
## License
Search text highlight is [MIT licensed](./LICENSE).