Skip to content
Highlight `words` in some `text`
TypeScript JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
demo
src
.babelrc
.eslintrc.js
.gitignore
.prettierrc.js
.stylelintrc.js
LICENSE
README.md
package-lock.json
package.json
tsconfig.json
webpack.config.js

README.md

@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
⇡ 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
You can’t perform that action at this time.