search-text-highlight v1.0.51
Search Text Highlight
This tool allow find a string or substring from a text and highlight it with html wrapper and unicode support.
Installation
npm install search-text-highlight --save
or
yarn add search-text-highlight
Usage
Import
// ES6 import
ā import searchTextHL from 'search-text-highlight'
or
// CommonJS require
ā const searchTextHL = require('search-text-highlight')
Basic usage
ā 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 <span class="text-highlight">amazing</span> tool for text highlight š.
Highlight multiple match substrings.
ā const text = 'This is a simple but an amazing tool for text highlight š.'
ā const query = 'a'
ā searchTextHL.highlight(text, query)
This is <span class="text-highlight">a</span> simple but <span class="text-highlight">a</span>n <span class="text-highlight">a</span>m<span class="text-highlight">a</span>zing tool for text highlight š.
Customize html tag; the default is a span
.
ā 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 <label class="text-highlight">amazing</label> tool for text highlight š.
Customize highlight class.
ā 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 <label class="custom-class">amazing</label> tool for text highlight š.
Highlight only the first query match.
ā 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 <label class="custom-class">a</label> simple but an amazing tool for text highlight š.
Highlight with a case sensitive query
ā 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.
: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
DailyBot is an AI Assistant 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.
License
Search text highlight is MIT licensed.
1 month ago
2 months ago
3 months ago
5 months ago
5 months ago
5 months ago
7 months ago
7 months ago
6 months ago
5 months ago
6 months ago
6 months ago
6 months ago
5 months ago
7 months ago
7 months ago
8 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
5 years ago
5 years ago
5 years ago