js-highlight-match-words v7.0.10

js-highlight-match-words

Give it a piece of text and a search query, and it splits it into chunks separating matches from non-matches, allowing you to highlight the matches, visually or otherwise, in your app.

install

npm i js-highlight-match-words

or

yarn add js-highlight-match-words

or

pnpm add js-highlight-match-words

usage

import { highlight } from 'js-highlight-match-words';

const config = {
  a: {
    activeClassName: 'a-activeClassName',
    activeStyle: 'font-size: 35px; background-color: #0f0',
    activeIndex: 1,
    className: 'a-className',
    highlightClassName: 'a-highlightClassName',
    highlightStyle: '',
    highlightTag: 'a',
  },
  b: {
    activeClassName: 'b',
    activeStyle: 'font-size: 55px; background-color: #0f0',
    activeIndex: 1,
    className: 'b-className',
    highlightClassName: 'b-highlightClassName',
    highlightStyle: '',
    highlightTag: 'b',
  },
  c: {
    activeClassName: 'c',
    activeStyle: 'font-size: 35px; background-color: #0f0',
    activeIndex: 2,
    className: 'c',
    highlightClassName: 'c-highlightClassName',
    highlightStyle: '',
    highlightTag: 'em',
  },
};

highlight({
  source: ' abc123aa1cbb2cbb.',
  searchWords: ['a', 'b'],
  config
}); // ' <a class="a-className a-highlightClassName " style=" ">a</a><b class="b-className b-highlightClassName " style=" ">b</b>c123<a class="a-className a-highlightClassName a-activeClassName" style=" font-size: 35px; background-color: #0f0">a</a>a1c<b class="b-className b-highlightClassName b" style=" font-size: 55px; background-color: #0f0">b</b>b2c<b class="b-className b-highlightClassName " style=" ">b</b>b.'