Skip to content

brianmcallister/highlight-text

Repository files navigation

@brianmcallister/highlight-text

codecov CircleCI npm version

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

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

Installation

npm install @brianmcallister/highlight-text

Usage

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

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

API

highlightText

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

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