dingq84/match-highlight-texts

match-highlight-texts

No matter what JavaScript-based framework you use, you can always use this package to highlight words entered by the user.

DEMO

Installation

  npm install --save match-highlight-texts

Usage

import { matcher } from "match-highlight-texts";

const list = "Hello world, this is match-highlight-texts";
const query = "world light";
matcher(list, query);
/*
  [
    { item: "Hello ", highlight: false }, 
    { item: "world", highlight: true }, 
    { item: ", this is match-high", highlight: false }, 
    { item: "light", highlight: true },
    { item: "-texts", highlight: false }
  ]
*/

Advanced options

delimiter: [string]

It splits the query string by one space

Default: ' '

const list = "Hello world, this is match-highlight-texts";
const query = "world;light";
matcher(list, query, { delimiter: ";" });
/*
  [
    { item: "Hello ", highlight: false }, 
    { item: "world", highlight: true }, 
    { item: ", this is match-high", highlight: false }, 
    { item: "light", highlight: true },
    { item: "-texts", highlight: false }
  ]
*/

caseSensitive: [boolean]

Default: false

const list = "Hello world, hello match-highlight-texts";
const query = "hello";
matcher(list, query, { caseSensitive: true });
/*
  [
    { item: "Hello world,  ", highlight: false }, 
    { item: "hello", highlight: true }, 
    { item: " match-highlight-texts", highlight: false }
  ]
*/

LICENSE

MIT