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

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