Highlight
words
in sometext
highlight-text
makes highlighting words and characters in a string quick and easy. This library is primarily used for adding a visual indicator to any text in a web page, much like the default search feature in your browser.
This is a great way to highlight search results collected from an input field within your application, or a range of possible use cases:
- User configured search terms in a chat application
- Administrator configured announcements
- Visual design elements
By default, the library will accept a string and some sub strings to search for. It will return all of the found strings surrounded by <mark>
tags, which can then be styled to match your branding. This is configurable, in case you want to use any arbitrary string or HTML tag.
Hosted demo: https://highlight-text.netlify.com/
You can also run the demo locally. To get started:
git clone git@github.com:brianmcallister/highlight-text.git
cd highlight-text/demo
npm i
npm start
npm install @brianmcallister/highlight-text
import highlightText from '@brianmcallister/highlight-text';
highlightText('some text', ['om', 'ex']);
// #=> 's<mark>om</mark>e t<mark>ex</mark>t'
This is the default export. Use this function to highlight words in text.
highlightText(text: string, words: string[]): string;