# @brianmcallister/highlight-text

> Hightlight `words` in `text`

Latest version **2.0.4** (published 2020-12-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @brianmcallister/highlight-text
pnpm add @brianmcallister/highlight-text
yarn add @brianmcallister/highlight-text
bun add @brianmcallister/highlight-text
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.4 |
| Published | 2020-12-24 |
| First published | 2016-12-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 34.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Brian Wm. McAllister |
| Maintainers | brianmcallister |
| Keywords | highlight, highlight-text, dom, string-manipulation, markup, text |

## Links

- npm: https://www.npmjs.com/package/@brianmcallister/highlight-text
- Repository: https://github.com/brianmcallister/highlight-text
- Homepage: https://highlight-text.netlify.com/
- Issues: https://github.com/brianmcallister/highlight-text/issues
- npm.io page: https://npm.io/package/@brianmcallister/highlight-text

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 2.0.4 (latest) — 2020-12-24
- 2.0.0-beta.3 (next) — 2019-11-09
- 2.0.3 — 2020-04-05
- 2.0.2 — 2020-04-05
- 2.0.1 — 2019-11-16
- 2.0.0 — 2019-11-09
- 2.0.0-beta.2 — 2019-11-07
- 2.0.0-beta.1 — 2019-11-07
- 2.0.0-beta.0 — 2019-11-07
- 1.2.1 — 2016-12-24
- 1.2.0 — 2016-12-23
- 1.1.0 — 2016-12-23
- 1.0.0 — 2016-12-20

## README

# @brianmcallister/highlight-text

[![codecov](https://codecov.io/gh/brianmcallister/highlight-text/branch/master/graph/badge.svg)](https://codecov.io/gh/brianmcallister/highlight-text) [![CircleCI](https://circleci.com/gh/brianmcallister/highlight-text.svg?style=svg)](https://circleci.com/gh/brianmcallister/highlight-text) [![npm version](https://img.shields.io/npm/v/@brianmcallister/highlight-text?label=version&color=%2354C536&logo=npm)](https://www.npmjs.com/package/@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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark), 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](#demo)
- [Installation](#installation)
- [Usage](#usage)
- [API](#api)
	- [`highlightText`](#highlighttext)

## Demo

Hosted demo: [https://highlight-text.netlify.com/](https://highlight-text.netlify.com/)

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

```sh
git clone git@github.com:brianmcallister/highlight-text.git
cd highlight-text/demo
npm i
npm start
```

###### [⇡ Top](#table-of-contents)

## Installation

```sh
npm install @brianmcallister/highlight-text
```

###### [⇡ Top](#table-of-contents)

## Usage

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

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

###### [⇡ Top](#table-of-contents)

## API

### `highlightText`

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

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

###### [⇡ Top](#table-of-contents)

---
_Source: https://npm.io/package/@brianmcallister/highlight-text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._