@brianmcallister/highlight-text

Highlight words in some text

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.

Table of contents

• Demo
• Installation
• Usage
• API
  • highlightText

Demo

Hosted demo: https://highlight-text.netlify.com/

You can also run the demo locally. To get started:

git clone [email protected]:brianmcallister/highlight-text.git
cd highlight-text/demo
npm i
npm start

⇡ Top

Installation

npm install @brianmcallister/highlight-text

⇡ Top

Usage

import highlightText from '@brianmcallister/highlight-text';

highlightText('some text', ['om', 'ex']);
// #=> 's<mark>om</mark>e t<mark>ex</mark>t'

⇡ Top

API

highlightText

This is the default export. Use this function to highlight words in text.

highlightText(text: string, words: string[]): string;

⇡ Top