Skip to content

This tool allow find a string or substring from a text and highlight it with html wrapper with unicode support.

License

Notifications You must be signed in to change notification settings

DailyBotHQ/search-text-highlight

Repository files navigation

Search Text Highlight

This tool allow find a string or substring from a text and highlight it with html wrapper and unicode support.


GitHub license GitHub stars total downloads

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);
}

🔌 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.